How it works - in brief
This layout uses three floats for the columns even though the middle column is a fluid width we can achieve this by using a 100% width float for the middle column and then applying a right negative margin equal to the widths of the left and right columns.
A negative margin on the opposite side of a float (opposite to the direction it is floated) doesn't change the width of a float but instead allows other content to approach from that side by the amount of the negative margin.
This would result in overlap of course so we need one extra html element to nest inside the middle floated column that has a margin-right equal to the combined width of the left and right floats and this then keeps the content clear of the side floats.
The benefit of floating all three columns is that we avoid the 3 pixel jog in IE6 and it also allows the html to remain in sensible source order in that left, middle and right columns follow each other logically in the html.
The drawback of this technique is that you must control the minimum width of the center column before the ocntent overflows or the columns will drop in IE6.
The min max routine for IE6 (as ie6 doesn't understand min/max width) is provided by javascript and a once only expression which avoids the speed issues with using expressions. (See Steve Souders for more information on this.)
The sticky footer is a combination of my old techniques and the results of a brain storming session on Sitepoint where a quiz I set refined the details into an all purpose sticky footer. You can see the quiz and read how it all evolves here. A stripped down version of the footer technique is shown here in all it's glory.
Lastly the full column colours are achieved with my absolute column overlay technique that I invented some years ago and uses two extra divs to supply just column colours. The full details are shown in my orignal article and as shown in this demo.