Three Column layout with footer

....the code hooligans solution

[IanTurner]

You'll probably guess I'm not a purist but I like to solve problems.

So here is how I got my three column layout with all columns clearing the footer. (Okay you have to know the max length of your fixed divs)

header div

left fixed - center expandable - right fixed

footer div

Is the solution I wanted to create.

I know that left and right have a fixed height and was getting problems with the footer when the center div failed to get to the height of left and right.

So all I did was create a transparent gif of the length of the longest of the left and right divs and put it in the center div.

<img src="img/force.gif" hspace="0" vspace="0" align="right" />

It stays out of the way and everything else flows nicely round it.

Then to get the footer clear just insert the

clear: both;

into the footer div css.

Works nicely in IE5, IE6 and Opera7 on PC

Haven't tested on anything else yet (but will probably go live with it anyway those are enough for me to consider it commercially viable)

P.S. It also allows me to put the center content above the left and right divs in the HTML layout.

[kzapkzap]

Yes it is very nice, I came up with this also for a site of mine. Works all around, best to get the height using mozzila as IE seems to make it a big smaller