After a recent post by Nick
Hodges asking “Got a good stylesheet that works on all browsers, and allows
for a three column/page-wide header/page-wide footer layout, and that doesn’t
behave strangely when the browser is sized?” I finally broke down and decided to
try and meet that challenge. What I
came up with seems to work well in IE6 and Firefox 0.9.3 on WinXP and
Safari, Firefox and IE (all latest versions) on Mac OSX. I think it’s a pretty
good example of how to use stylesheets to get a layout that works without
requiring the use of tables and provides all of the elements of many modern
It’s entirely possible that this idea is not new or unique so I don’t claim
either but it’s a small, very workable solution.
Give it a shot and let me know how well/poorly it works for you.
UPDATE: I’ve added a second
page where the footer appears at the bottom of the browser by setting the
height of the maincontent DIV to 95% of the height of the browser which seems to
UPDATE #2: Since Carlos has issued (yet) another challenge I spent about 3-4
minutes tweaking my original
page and came up with a few minor modifications that allows for a header,
footer (at the bottom of the page) and three
CSS. I’ve tested in IE6 and Firefox 0.9.3 (my browser of
choice) and both work about equally well. Now, I haven’t tried using this page
in a real world application so I’m not entirely sure how well it would work but
I it sure seems to me like it would work just fine.
[Updated: Jan. 13, 2010] Thanks to the Internet Archive I was able to resurrect links to the files above.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.