Category Archives: HowTo

Three Column Layout Using CSS

After a recent post by Nick
 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
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
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.