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
             |
----------------------------------------------

score 0 · Accepted Answer · edited Jul 31 '16 at 16:36

0

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/

edited Jul 31 '16 at 16:36

Peter Mortensen

30,738
21
105
131

answered Feb 22 '14 at 20:59

Kheema Pandey

9,977
4
25
26

If you find this useful, check the green mark. so other people face same problem can get benefited by reading this. – Kheema Pandey Feb 22 '14 at 21:35
Yes worked. Thanks a bunch!! – user3341749 Feb 22 '14 at 22:51
I've tried this and it didn't work. Do you know what other properties might be preventing it from working for me? Thanks. – moosefetcher Apr 11 '18 at 10:49

score 0 · Answer 2 · answered Feb 22 '14 at 23:04

Here is another way of achieving equal height columns. This works well to three column lay-outs (limited to applying styles to the parent container, [parent container]:before and [parent container]:after). Otherwise you would need extra containers.

.box_container {
    position: relative;
    z-index: 1;
    width: 100%;   
    background: yellow;
    overflow: hidden;
}
.img_box, .content_con {
   float: left;
   width: 50%;
   position: relative;
}
.img_box > *, .content_con > * {
    padding: 0 10px;
}
.box_container:before {
    background: red;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: -1;
}

http://jsfiddle.net/4Z8np/39/

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

2 Answers2