This is a nice pure-CSS three column layout.
Basic structure of page:
<body>
<div id="head">heading</div>
<div id="wrap">
<div id="main">centre column</div>
<div class="sidebar" id="left">left column</div>
<div class="sidebar" id="right">right column</div>
</div>
</body>(Note: although in HTML, the opening and closing tags for the BODY element are technically optional, it's a good idea to leave them in for Netscape 4.x, otherwise Netscape is incapable of applying styles to the BODY element.)
And the CSS goes like this:
/******
* The basics. All the browsers get this bit right.
******/
#wrap {
position: relative;
}
#wrap #main {
margin: 0 11em;
}
#wrap .sidebar {
width: 10em;
position: absolute;
top: 0;
}
/******
* The following left:0 and right:0 properties ought to be
* enough to finish the trick. Netscape 4 seems to want the
* floats in there too though. Not sure why.
******/
#left {
left: 0;
float: left;
}
#right {
right: 0;
float: right;
}
/******
* If you thought Netscape 4 was a pain, now we come to Internet
* Explorer. First of all we use a slash-star-slash-star-slash
* comment hack to stop Netscape 4 from going any further. Netscape
* 4 is fine as it is now.
*
* Then we feed IE 5, 5.5 and 6 a bogus "left:-10em" value. Other-
* wise the left column will overlap the centre one.
*
* Then we have to use a child selector to re-affirm the original
* "left:0" value in decent browsers.
*
* While we're at it, we might as well remove the floating that
* we added for Netscape 4's benefit.
******/
/*/*/
#left {
left: -10em;
float: none;
}
#wrap>#left {
left: 0;
}
#right {
float: none;
}