CSS - Equal Height Columns?

Question

In CSS, I can do something like this:

But I\'ve no idea how to change that to something like:

---

Is this possible with CSS?

Answer 1

Give overflow: hidden to the container and large (and equal) negative margin and positive padding to columns. Note that this method has some problems, e.g. anchor links won't work within your layout.

Markup

CSS

.container {
    overflow: hidden;
}

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

The Result