Alix Axel Alix Axel - 6 months ago 28
CSS Question

CSS - Equal Height Columns?

In CSS, I can do something like this:

alt text

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

alt text




Is this possible with CSS?

If yes, how can I do it without explicitly specifying the height (let the content grow)?

Answer

Flexbox

If you are reading this in late 2013, you have flexbox at your disposal. Assuming this layout:

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

With flexbox, equal height columns is just one declaration:

.row {
    display: flex; /* equal height of the children */
}

.col {
    flex: 1; /* additionally, equal width */
}

Browser support: http://caniuse.com/flexbox; demo: http://jsfiddle.net/7L7rS/

Table layout

If you still need to support IE 8 or 9, then you have to use table layout:

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}

Demo: http://jsfiddle.net/UT7ZD/