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?

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

Answer 1

Yes.

Here is the completed CSS the article uses. It is well worth reading the entire article, as the author goes step by step into what you need to make this work.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

This isn't the only method for doing it, but this is probably the most elegant method I've encountered.

There is another site that is done completely in this manner, viewing the source will allow you to see how they did it.

Answer 2

You could use CSS tables, like so:

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>

Answer 3

You can do this easily with the following JavaScript:

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};

Answer 4

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/

Answer 5

Responsive answer:

CSS flexbox is cute, but cutting out IE9 users today is a little insane. On our properties as of Aug 1 2015:

3% IE9
2% IE8

Cutting those out is showing 5% a broken page? Crazy.

Using a media query the way Bootstrap does goes back to IE8 as does display: table/table-cell. So:

http://jsfiddle.net/b9chris/bu6Lejw6/

HTML

<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
</div>

CSS

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

I used 400px as the switch between columns and a vertical layout in this case, because jsfiddle panes trend pretty small. Mess with the size of that window and you'll see the columns nicely rearrange themselves, including stretching to full height when they need to be columns so their background colors don't get cut off part-way down the page. No crazy padding/margin hacks that crash into later tags on the page, and no tossing of 5% of your visitors to the wolves.

Answer 6

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

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

CSS

.container {
    overflow: hidden;
}

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

The Result