How to create a table-like CSS layout with DIVs?

Question

UPDATE 2

I found a tentative solution that currently works for me in Chrome on Mac OS X. You can check out my answer below for details. For those of you who are sti

Answer 1

based on your most recent answer, I take it you don't need the footer to be full width (only sticky, though yours isn't) and also I presume you know that your version will only work if you know the height of the "foo - not so important content", as you need the that height to set the top co-ordinate for the sidebar .

You version falls down in that when you narrow the window content disappears off the sides.. but based on the thinking behind it - I've used your logic extended it and built in the sticky footer, top menu - everything that was in the original example link.

the footer's not full width, but you can make it look like it is by putting a background image on the html element, I have a plain dummy image in my fiddle but it's not showing up, anyway you would make an image the same height/color as the footer with the 1px border built in

this absolutely relies on you being able to fix/calculate the height of everything above the pink/blue columns

there is a lot less container divs needed for this and the content is now before the sidebar in the source

Here's the fiddle : fullsize : to edit