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. http://matthewjamestaylor.com/blog/perfect-3-column.htm

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

Edit: Here's another: http://www.manisheriar.com/holygrail/index.htm

Edit: Article: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Edit: Woops. First link was supposed to be this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

You can do this with JQuery

$(window).load(function() {
    //call the equalize height function
    equalHeight($("div.left, div.middle, div.right"));

    //equalize funciton
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
}); 

Answer 3

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>