I have a two divs inside a container div, and I want the img_box div to match the height of the
content_con
content_con
content_con
<div class="box_container">
<div class="img_box"></div>
<div class="content_con"><div>
</div>
.box_container
----------------------------------------------
|
.img_box | .content_con
|
----------------------------------------------
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 div
s.
.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: