Digital Transition » Three column layout, without tables

Now for the CSS:

#wrapper {
   width: 800px;
}
#floatcols {
   float: left;
   width: 600px;
}
#maincontent {
   width: 400px;
   float: right;
}
#sideleft, #sideright {
   width: 200px;
}
#sideright {
   float: right;
}
#foot {
   clear: both;
}


First of all a little note. The sample-code you see above is for a fixed-width layout of 800 pixels. This can however easily be used for a variable-width layout. Also note that this is for compliant browsers. A box-model hack might be needed for the others.

A little word on the CSS itself.

1. The wrapper get’s the fixed with. In case of variable width, this would be left out
2. The floatcols, which is the left column and the main content together, need to float to the left and get a width (in this case: 600 pixels)
3. In the following three blocks, both the columns get a width of 200 pixels and the main content gets 400 pixels (totalling the 800 pixels of the wrapper). Also, the main content floats to the right of the left column and the right column floats right relative to the floatcols <div>.
4. Finally, the footer clears both floats, resulting in a nice close of the content <div>. This to make sure that borders and background color given to that <div> go all the way to the bottom.

Admitted, this is a little more work than a two column layout without tables .

Pages: 1 2