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

Question

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 1

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/

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

Sign up