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
websites.
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
work pretty well and still doesn't require Javascript.
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
full height columns all without Javascript and only using some pretty simply
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.