Position is Everything has an old, but still valid and amazingly simple way to create columns of equal height using very simple CSS.

In short: Give the columns a large padding-bottom value and a negative margin-bottom of equal value, and set the overflow to hidden for the containing <div>.

HTML code:

<div id="container">
    <div class="column">
        Left column
    </div>
    <div class="column">
        Right column
    </div>
</div>

CSS:

#container {
    overflow: hidden;
    }

.column {
    float: left;
    padding-bottom: 5000px;
    margin-bottom: -5000px;
    }

There are three known problems with this solution, however, so make sure your site won't be affected before using this solution:

View the known problems