3 Columns, No Wrap, More Precise

This is an accessible CSS layout technique for producing three columns of text that are fluid and resize based on percentages. It uses all relative units and columns do not wrap if the previous column is shorter than the next. It is a more reliable solution than the previous Three Column Narrative, No Wrap since it works in IE 5 and pre-7 versions of Opera. It can also be expanded to any number of columns. The only problem is with IE 5.2 on OS X which adds a horizontal scrollbar at the bottom of the page that is not needed. Everything is still visible and you don't need to use the scrollbar, but still, this sucks.

#mainleft {
position:absolute;
left:1%;
width:32%;
background:#fff;
}

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.

#maincenter {
position:absolute;
left:34%;
width:32%;
background:#fff;
}

.borderblock {
border:.075em solid #000000;
padding:1em;
}



This layout technique is basically the same as that shown on the glish page as a four column layout, but with the top pixel values removed

#mainright {
position:absolute;
left:67%;
width:32%;
background:#fff;
}