user3341749 user3341749 - 4 months ago 10
CSS Question

How to get two divs the same height depending on which one has the bigger height in CSS

I have a two divs inside a container div, and I want the img_box div to match the height of the

content_con
div depending on how much height it has. So let it stay if the
content_con
div has three paragraphs and that gives
content_con
a height of 303 pixels; I want the img_box div to match that height. Make sense? How do I do that in CSS?

In short, img_box and content_con match the height depending on which one has the bigger height. See below to see a vis:

<div class="box_container">
<div class="img_box"></div>
<div class="content_con"><div>
</div>


.box_container
----------------------------------------------
|
.img_box | .content_con
|
----------------------------------------------

Answer

You can do like this by the following method, no matter how much data comes in the div. But the height will be equal for both divs.

.box_container{display:table;width:100% }
.img_box, .content_con{display:table-cell; vertical-align:top; width:50%}
.img_box{background:red;}
.content_con{background:yellow;}

Here is a demo to see how it looks:

http://jsbin.com/hidicoma/1/

Comments