html - Make two parallel `<div>` 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.

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.