I need to position 2 divs inside a container div. Their height should always be the same, regardless of content. To achieve this, I am using absolute positioning with top and bottom set to 0. Currently, the container div #three collapses and hides the content of the two thumb divs.
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 will go here to expand the divs.
</div>
<div class="thumb-container" id="right-thumb-container">
More content will be placed here to expand the divs.
</div>
</section>