Make two parallel `
` colums the same height

Question

Suppose I have two columns, both represented by a <div> block. Both columns may grow larger than the other, so I want to force the smaller one to grow as big as the other.

Example of my problem: http://jsfiddle.net/TvnSJ/

As you can see, the second column is smaller.

I managed to solve this using tables, but I was unable to add margin between them. The margin is important, so I would like to know another solution.

you want both the div of same height irrelative of the content ... — saurabh kamble, Dec 15 '13 at 06:57
Are you floating the columns to remove the whitespace between inline-block containers? — monners, Dec 15 '13 at 07:07

score 6 · Answer 1 · answered Dec 15 '13 at 07:04

You can use display: table and display: table-cell. Here is your fiddle updated: http://jsfiddle.net/TvnSJ/2/

This makes the divs render like tds. Basically you can get the layout of a table without using a table when it is semantically incorrect. I don't think you can float them however.

Edit: I just noticed the bit about margin. You can add padding to these, or you could wrap the content in another element and add margin to that if you need the separation to not include the background colour.

You could also use relative positioning to simulate the margin (right-column) `position: relative; left: 20px` — monners, Dec 15 '13 at 07:19

ntt · Accepted Answer · 2013-12-15T07:25:46.400

This can be achieved in CSS3 with the new box model:

.box {
    width:100px;
    display:box;
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
     /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    /* W3C */
    display:box;
    box-orient:horizontal;
}

.box .column1 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: yellow;
}

.box .column2 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: green;
}

And the HTML

    <div class="box">
      <div class="column1">
          a<br>b
      </div>
      <div class="column2">
         a
      </div>
   </div>

I made this with the examples from here http://www.w3schools.com

Fiddle http://jsfiddle.net/w5ELr/

score 1 · Answer 3 · answered Dec 15 '13 at 07:14

Here's another approach using 2 containers that I used recently

<div class="container2">
    <div class="container1">
        <div class="col1">
            a<br />b<br />c
        </div>
        <div class="col2">
            a
        </div>
    </div>
</div>

CSS:

.container2 {
    clear:left;
    float:left;
    width:100px;
    overflow:hidden;
    background:blue; /* column 2 background colour */
    color: white;
}
.container1 {
    float:left;
    width:100px;
    position:relative;
    right:50%;
    background:green; /* column 1 background colour */
    color: white;
}
.col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
.col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

Fiddle: http://jsfiddle.net/Lunf6/1/ Inspired from: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

score 1 · Answer 4 · answered Dec 15 '13 at 07:32

if you want the same but using table:

<table style="width: 100%;">
<tbody>
<tr>
    <td style="background: #006600;">a<br/>b</td>
    <td style="width: 5px;"></td>
    <td style="background: #BB0000;">a</td>
</tr>    
</tbody>
</table>

you can style your table and its cells as you like with paddings, margins, etc:

.TABLE-DEFAULT{    
    border          : 0px;
    border-collapse     : separate;
    border-spacing      : 0px;
    width           : 100%;
    background          : transparent;
}

.TABLE-DEFAULT td{
    padding: 4px;

}

.TABLE-DEFAULT td:FIRST-CHILD{
    padding: 0px;

}
.....etc

score 1 · Answer 5 · answered Dec 15 '13 at 07:59

Despite question #2 solves the question fully and satisfactorily, it has a big drawback to consider: It doesn't works in IE7 and below.

If you need too support old browsers, there's another approach based on padding, margin and overflow properties. It's a little bit tricky, but it works:

Define a container div, which works as a "colum-row", like this:

<div class="column-row"></div>

.column-row {overflow: hidden}

Then put some columns in it. And style them setting padding and margin to force a fake overflow:

<div class="column-row">
   <div class="column">Column 1</div>
   <div class="column">Column 2</div>
   ...
</div>

.column-row {overflow: hidden}
.column {float: left; padding-bottom: 99999; margin-bottom: -99999}

So, you'll get a bunch of columns which they looks equal sized, where their height value corresponds to the largest one.

I have edited the previows jsFiddle (now at http://jsfiddle.net/TvnSJ/16/) if you want to play with a working example.

score 0 · Answer 6 · answered Dec 15 '13 at 07:07

To get two divs the same height automatically after adding content to one, you'll need to use javascript or jquery. Here is the below jQuery that can do this for you. Just change #column-1 to the ID of your first colum and #column-2 to the ID of your second column.

$(document).ready(function(){
    x = $('#column-1').height();
    y = $('#column-2').height();
        if x > y {
            $('#column-2').height(x);
        else {
            $('#column-1').height(y);
}
});

Make two parallel `
` colums the same height

6 Answers6

Linked

Make two parallel `` colums the same height

6 Answers6

Linked

Make two parallel `
` colums the same height