I have redone my website a number of times in CSS and have never ever made it live because of one major brain fart.
Everytime I redo my tabled website because of a reinvigerated desire to produce pretty printer friendly versions I get stuck on the same thing (please refer to the attached image). Before wooing at my l33t photoshop skills, I would appreciate some of your wisdom.
I am fine with CSS positioning, but the layout confuses me. I wish to retain the 3 column vertical stretch feel you get with tables, but with CSS.
So then I think ok, well I'll have 3 seperate vertical divs. Each will stretch for the content. But the problem with this is that all 3 divs will stretch independently.
So then I think ok, well I'll make one big div and have the 3 columns inside this div, but give the outside 2 a bgcolor so the centre column (which contains the content) should be the only one that stretches, and what with the coloured outer columns it won't look odd. But then the outside columns still don't stretch with the center column because they're not attached.
And then I get stuck with the footer.
My footer has to be in the format it is in the attached image.
How on Earth can I put that footer there without knowing the absolute positions of the above div ?
These questions aside, I have managed to get over some quite (for me at least) complex positioning and formatting issues, however this big brainfart is halting all my progress.
If you want to imulate stretching right and left colums, you can set the background color on the body to the color you want for the left and right colums.
Float the left and right colums respectfully, and position the center colum using margins set the same as the width of the left and right colums.
Then simply place the footer below the center content in the markup, since the center content is the longest colum, it'll force the footer down, and you won't have to worry about clearing the floats, unless one or both of them becomes longer than the center content.