easiest way to get two equal height columns using divs

I have a content column and a sidebar. The content column has a white bg, the sidebar has a slight开发者_高级运维 gradient bg image. The content column is always longer than the sidebar, so the sidebar image doesn't stretch to the bottom. How can I always make the content and sidebar columns the same height vertically using divs?

Although not the only way, to do it, my favorite is to use the "faux column" trick: http://www.alistapart.com/articles/fauxcolumns/

The basic idea is to place the gradient background in a div that wraps both the content and the sidebar. That wrapper div is guaranteed to be as big as the longest DIV, therefore your gradient is always visible.

position: absolute is often considered bad form, but it is possible to achieve equal-height columns using the following code:

HTML:

<div id="container">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat dignissim accumsan. Aenean nisl ipsum, dictum nec dignissim ac, dictum et lacus. Aenean ac sapien egestas lacus rutrum rutrum. Etiam sit amet libero ac arcu pellentesque bibendum. Nulla dignissim imperdiet nulla, ac dictum lorem feugiat id. Proin convallis tempus commodo. Ut vitae elit velit. Duis lacinia sollicitudin justo et vehicula. Duis sed velit vitae arcu tincidunt condimentum eu eget risus. Maecenas non urna nisi.

        In ac lacinia dui. Donec lacinia, lacus fermentum ultrices iaculis, leo purus pretium velit, in rutrum est nisi sit amet mi. Curabitur nisl nunc, malesuada ac feugiat et, dignissim vel nisl. Proin ac erat in ipsum laoreet blandit nec nec tortor. Maecenas bibendum risus ac lorem pretium et dignissim lacus laoreet. Aenean suscipit porta leo ut commodo. Phasellus porttitor, nulla eget euismod pellentesque, enim sem consequat ipsum, quis interdum nunc mauris quis mauris. Proin orci est, convallis eu sodales vel, tempus a dolor. Mauris pretium faucibus tincidunt. In mauris arcu, laoreet sit amet ullamcorper sed, malesuada vel felis. Nam sollicitudin pellentesque sapien vel facilisis. Suspendisse risus dolor, tincidunt sit amet auctor nec, mollis ac nisi. Nunc sagittis libero non massa tincidunt at bibendum est pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

        Praesent ullamcorper, odio a euismod mattis, nisi arcu feugiat nisi, eu hendrerit diam augue eget diam. Nulla pellentesque sodales ante id tincidunt. Aliquam in purus vitae ante scelerisque tempor. Duis bibendum, nibh non accumsan pulvinar, lacus libero vestibulum sem, id lacinia erat nisi scelerisque mauris. Ut et tristique metus. Aenean ullamcorper vestibulum metus a laoreet. Vestibulum iaculis vestibulum elit, lobortis pharetra orci adipiscing sit amet. Integer vel molestie nulla. Morbi fringilla erat et nisi varius blandit. Pellentesque nunc ante, tempor vitae tincidunt et, rhoncus et urna.
    </div>
    <div id="sidebar">
        sidebar
    </div>
</div>

CSS:

#container
{
    width: 500px;
    position: relative;
}

#content
{
    width: 65%;
    background-color: #000;
    color: #FFF;
}

#sidebar
{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #EEE;
    width: 33%;
}

Combining top: 0 and bottom: 0 causes the element to stretch to its limits (as long as no height is declared). See the jsFiddle for a demonstration.

There are many different ways to accomplish this. I've found, the correct solution depends greatly on your HTML Architecture.

That being said, if you're having a hard time with HTML/CSS, a work-around that I have used out of desperation is to use JS (in this example, jQuery). I am not suggesting you include jQuery in your poject merely for this reason. I am simply offering an alternative that I have used before.

http://jsfiddle.net/zZpuU/

var h1=$('#div1').height();
var h2=$('#div2').height();

if (h1>h2)
    $('#div2').height(h1);
else
    $('#div1').height(h2);