This is an accessible three column layout that differs from others commonly found on the web in that it uses all relative units and the second and third columns do not wrap if they are longer than the preceding column.
#mainleft {
float: left; width: 32%;
}
It includes border blocks to seperate the columns of text, but these could, obviously be removed if not needed.
#centerright {
margin-left: 33%; width: 65%;
}
#maincenter {
float: left; width: 47%;
}
You must make sure to put any borders, padding or margins in div blocks that are inside the columns. If you apply borders, padding, or margins to the column divs themselves, you will have problems as different browser calculate percentage values differently.
.borderblock {
border:.08em solid #000000; padding:1em;
}
It should be used for three columns of narrative text, rather than for two menu boxes and a center narrative text column. Each column appears in the code in the same order it diplays on the page, meaning it is useful where the order of the columns is important (some 3 column layouts use float:right for the third column, which makes the displayed order different from the order of the code). The percent totals do not equal 100%, because IE is a piece of crap. IE 5.01 makes the 2nd and 3rd columns too thin, but it is still readable. Opera browsers before 7 do not put any space between the 2nd and third columns, but it is readable.
#mainright {
margin-left: 49%; width: 47%;
}