html - positioning two elements inside a parent to be the same height -


i have 2 divs need position inside containing div need both same height no matter content goes in either of them, need take height of tallest 1 hence absolutes , top bottom set 0, container div #three collapses , hides 2 thumb divs content.

section#three {      width: 100%;      max-width: 1050px;      margin: 0 auto;      padding: 70px 0px 70px 0px;      position: relative;  }    section#three div.thumb-container {      width: 40%;      top: 0;      bottom: 0;      position: absolute;      clear: both;  }    section#three div#left-thumb-container {      left: 5%;  }    section#three div#right-thumb-container {      right: 5%;  }
<section id="three">      <div class="thumb-container" id="left-thumb-container">          content here expand divs      </div>        <div class="thumb-container" id="right-thumb-container">          content here expand divs      </div>  </section>

i recommend use flexbox solve issue. https://codepen.io/imohkay/pen/gpard can see example there.

#three {    display: flex;  }    .thumb-container {    background: gray;    border-left: 1px solid #fff;    flex: 1 0;    padding: 30px;  }
<section id="three">      <div class="thumb-container" id="left-thumb-container">          content here expand divs          <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. sapiente beatae nulla earum error reiciendis molestias praesentium, doloribus esse provident harum illum, voluptate vero ratione unde fugit repellendus laboriosam ad officiis.</p>      </div>        <div class="thumb-container" id="right-thumb-container">          content here expand divs      </div>  </section>


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -