3 columns with fixed width sides
The side columns are achieved by the methods described in the side panels. Here is the CSS essentials for one side:
#colourBarLeft {
background: #cfc;
position: fixed;
width: 230px;
left: 0; top: 0;
height: 100%;
}
#leftcol {
position: absolute;
width: 210px;
top: 0;
z-index: 1;
}
And here are the CSS essentials for the fluid centre:
#content {margin: 0 230px 0 230px;}
The CSS, as you can see above, is simple enough. The HTML is also not hard. Essentially it goes like this:
<div id="content">Content material</div>
<div id="leftcol">Left column material</div>
<div id="rightcol">Right column material</div>
<div id="colourBarLeft"></div>
<div id="colourBarRight"></div>
Here are some things to note:
- The order in the HTML will appeal to some authors because it puts the content first, perhaps giving the page an advantage with search engines and/or conveniencing those with other than normally configured visual browsers.
- The two extra divs that deliver the viewport fixed colours for the appearance of the side columns are relegated to last, being merely a presentational device. Perhaps this will not mollify a real purist! Doing this requires a z-index specification to make the text appear. If you don't fancy z-indexing, you can leave it out completely and move the colour bar divs up above the text holding column divs, just under the content div.
- The fixed width of the side panels, naturally, will have the downside of all such widths in allowing the text to break out at big enlargements. But this is something many authors think worth paying for to get the benefits of the middle content not being too squashed. The middle still retains a good measure of fluidity. But see below.
This layout can be adapted to use em based widths or percentages. Simply change the css of the widths and margins. And it can surely be adapted to include a head and footer