2/3 column float with footer layout. How to keep consistent length of columns?

So I've always had a problem with this and haven't found any solutions except to go with an absolute position layout. Here's my issue:

I like to use the traditional header, left column, right column, footer layout.

If I use floats for the left/right columns, how can I keep the 2 columns the same length?

 

Because IE doesn't support the display property to any great shakes, we use a work-around called faux columns to fake columns of apparent equal height.

cheers,

gary

 

hmm....thank you for this, I'll give it a shot!

 

Softnmore posted a neat idea here... one float wrapped the other. The length of the inner float forced the outer float to stay the same height.

Like this:
<div id="wrap">
<div id="leftcolumn">
<div id="rightcolumn>
stuff stuff stuff
</div>
</div>
</div>

#wrap {
width: 100%;
overflow: hidden;
}
#leftcolumn {
width: 100%;
float: left;
}
#rightcolumn {
width: 20%; (or whatever, and could be in px or anything)
float: right;
}

It was a neat idea. The inner float has to be the one that will get longer... if the outer gets longer, the inner won't stretch to meet it. So, not foolproof.