About This Layout
This page is styled with CSS. It demonstrates a three-column absolutely positioned layout.
The concept
Absolute positioning specifies the horizontal location of the columns. The header is in the normal document flow. The three columns are absolutely positioned with repect to the wrapper, but only horizontally, so they still sit below the header. whatever height it might be. The foooter has to be part of the center column. This is because the side columns are not in the document flow, so the foooter cannot be set to clear them as in floated layouts. The side columns are programmatically extended using the NiftyCorners JavaScript.
Auto left and right margin settings are applied to the fixed-width containing div, which makes the layout center in a wide browser window.
The Stylib Files
This example uses two CSS files from the Stylib CSS library
The XHTML markup file is called
Note: Inner divs inside each of the five main divs allow padding and borders to be applied without affecting the width of the main structural divs.