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

  1. 3_col_abs.css
  2. text_n_colors.css

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.

the promo area