With a little help from Javascript, of course

It is possible to achieve equal-height columns using pure CSS, but (a) it comes with some limitations, or (b) the markup is remarkably obtuse.

Two unequal-height columns:

How do we make them equal?

A simple trick

A simple trick is to use the same background color for the container:

Can't tell, can you?

Really equal-height?

It's not real, though:

What do we do if we need real equal-height columns?

Don't think, use Javascript

There is no need to think too hard. Just use Javascript:

The code is so simple:

$("#box .col2").height($("#box .col1").height());

In pseudo-code:

col2.height = col1.height;

(Of course, this assumes col1 is always taller than col2. In the real code, you assign the taller column to the shorter one.)

The catch

This makes the two columns equal-height only at that point in time. If the height can change, then you need to poll periodically.

Catch #2

You can only get the correct height for visible elements — you cannot manipulate hidden elements.