CSS Equal Height Columns - Ugh! Again?

Question

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.

Answer 1

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