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
Post a Comment