CSS Equal Height Columns - Ugh! Again?

Right, worst question in the history of web design. Who cares, just choose an option. So my question is like this...

What is the best answer to be standards compliant and (backwards) browser compatible?

jQuery used for layout which is supposed to be reserved for css and html

OR

Negative margin, extra containers , or 开发者_开发问答other hacks or bloat?

Already spent too much time on this but looking for the "professional" way to do it.

EDIT: Here is a code example using Alexander's method.

Usually I use pure css/html solution which works in 99% cases:

I have a parent div with background-repeat on 'Y' axe. The general structure is going to be like this :

html:

<div id="container" class="clearfix">

    <div class="LeftPane"></div>
    <div class="CenterPane"></div>
    <div class="RightPane"></div>

</div>

css:

#container{
    background:url(imagePath) 0% repeat y;
}

for background image you can apply image for the borders, or everything else what can make users to think that all 3 blocks have the same height

There are many ways of successfully doing that, I think the easiest one of them is to simply wrap them all in a common parent container, set his display to table or table-row No need for parent at all. and set the original <div>s to display: table-cell;

jsFiddle.

For compatibility I'd suggest jQuery. Hacks and extra containers make your code bloated, as you've said, and will end up making it more difficult to edit if changes need to be made. And anyways, HTML is the layout of the page.

I have come up with a revolutionary new method for equal height columns. It is a pure CSS/HTML solution, tested in the latest Chrome and Firefox, and IE7-9. It is a bit tricky to set up but once it is done it works beautifully. The problem with every previous solution I have seen is that it doesn't actually create individual, side-by-side divs that can have their own borders, margins, etc. Other solutions always have some columns overlapping which means you can only contrast the different columns by changing the background. This method allows any column to be any height unlike some methods. The secret to its success is using float: right instead of left. If it was floated left you would have issues with extra space on the right causing scroll bars. Perhaps the only down side with this method is that it can be hard to wrap your head around!

Check it out here. http://jsfiddle.net/wRCm6/2/