Question

I have two columns side by side that are different colors. The background has a unique color as well. The right column contains text that will expand to an unknown height. The other column contains little to nothing.

<div id="container">
    <div id="leftColumn">
        <p>Only one small paragraph here</p>
    </div>

    <div id="rightColumn">
        <p>Many large paragraphs inside here.</p>
    </div>
</div>

I would like the left column to be the exact height as the right column.

Here’s the CSS…

#leftColumn {
    display:inline-block;
    width: 200px;
}
#rightColumn {
    display:inline-block;
    width: 600px;
    vertical-align: top;
}

So when the page loads I use jQuery to set the height of the left column based on the height of the right column.

$(document).ready(function() {
    $('#leftColumn').css('height', $('#rightColumn').innerHeight());
});

Is there a way to do this with only CSS?

Answer 1

There are a few other ways to achieve this layout besides using Javascript.

Methods include:

• Using display:table on the elements
• Faux columns (background image on the parent element)
• Adding multiple div containers for each background
• Use a table (not very popular for obvious reasons)

All of these have different advantages, drawbacks and each introduces thier own headaches to the development of the site. I’d vote for using faux columns because it keeps the html the simplest and is compatible with all browsers.

Additional reading:

• http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
• http://www.alistapart.com/articles/fauxcolumns/
• http://www.code-sucks.com/css%20layouts/faux-css-layouts/
• http://www.addedbytes.com/articles/faux-columns-for-liquid-layouts/