How this multicolumn layout works

Divisions

The basic principle is:

Use <div> tags to identify the columns
In CSS set the width to a percentage of parent (page body) The percentages should add up to 100%. Actually IE5 and IE6 work better if you make the percentages add to 99.9%.
In CSS use float: left for each column.

IE5 width miscalculation

IE5 incorrectly adds specified padding after calculating the width. This means that padded divs must have widths which add to less than 100%. Some people therefore serve up different CSS sheets for IE and NS.

The answer is to have no padding on the divs but to nest another div inside each column, the inner div can then have padding (but no width spec so it sizes automatically). This works in both NS and IE (and all others I hope!).

Overlapping bottom bar

Some sites advise the use of javascript to calculate the position of the bottom of the longest column and to relocate the bottom bar to just below that position.

A better solution is to insert <br clear="all"> before the bottom bar.

This page complies with W3C XHTML and W3C CSS standards