3 column layout rendering issue - html

Question

I have a 3 col layout, left and mid col are images, and the last col is text. I want to keep the height of all col the same at all times even when the browser resizes. I don't mind having scroll bar on the last col with text.
HTML:
<div class="mid-col">
<img src=""/>
</div>
<div class="right-col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed semper, eros nec sollicitudin porta, nibh justo consectetur elit,
a ultricies libero est ac justo. Nulla dictum dignissim placerat.
Donec non eros nisl. Morbi diam est, volutpat a orci tempus, mollis
maximus dui. Quisque consequat risus et sagittis dapibus. Mauris nulla
quam, ullamcorper a mattis sed, pretium sit amet dolor. Etiam pharetra
velit id lacus cursus imperdiet. Phasellus ex ipsum, finibus vitae
rhoncus et, suscipit at risus. Nam dignissim sapien tortor, ut
egestas tortor pulvinar ut.
</p>
</div>
</div>
CSS:
#content-container {
width: 100%;
height: 33.333%;
}
.left-col img {
width: 33.333%;
float: left;
display:block;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.mid-col img {
width: 33.333%;
float: left;
display:block;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.right-col {
width: 33.333%;
height: 33.333%;
height: 100%;
display:block;
overflow: scroll;
}

Answer 1

you can achieve that by using display:table-[cell]
#content-container {
width: 100%;
display: table;
}
#content-container > div {
display: table-cell;
width: 33%;
vertical-align: top;
border: 1px solid green
}
img {
width: 100%;
display: block;
height: auto;
}
<div id="content-container">
<div class="left-col">
<img src="http://lorempixel.com/100/100" />
</div>
<div class="mid-col">
<img src="http://lorempixel.com/100/100" />
</div>
<div class="right-col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper, eros nec sollicitudin porta, nibh justo consectetur elit, a ultricies libero est ac justo. Nulla dictum dignissim placerat. Donec non eros nisl. Morbi diam est, volutpat a orci tempus,
mollis maximus dui. Quisque consequat risus et sagittis dapibus. Mauris nulla quam, ullamcorper a mattis sed, pretium sit amet dolor. Etiam pharetra velit id lacus cursus imperdiet. Phasellus ex ipsum, finibus vitae rhoncus et, suscipit at risus.
Nam dignissim sapien tortor, ut egestas tortor pulvinar ut.
</p>
</div>
</div>

Answer 2

The browser renders from top to bottom so you are getting the opposite effect. Try:
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
.container {
height: 100%;
}
.child1 {
width: 33.333%;
height: 33.333%;
float: left;
box-sizing: border-box;
}
.child2 {
width: 33.333%;
height: 33.333%;
float: left;
box-sizing: border-box;
}
.child3 {
width: 33.333%;
height: 33.333%;
float: left;
box-sizing: border-box;
overflow-y: auto;
}
The parent container can take up all the space. Each child can float to the left. Changing the box sizing keeps a consistent width for percentages.

Answer 3

I like #beautifulcoder's answer but I have the same thing on one of my sites and handled it with jquery.
$(function() {
var divHeight = $(window).height()/3;
$('.left-col').css('height',divHeight));
$('.mid-col').css('height',divHeight);
$('.right-col').css('height',divHeight);
$('.right-col').css('overflow-y','auto');
})