Make two parallel `<div>` colums the same height - html

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.

Answer 1

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.

Answer 2

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/

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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);
}
});