About This Layout

This page is styled with CSS. It demonstrates an absolutely positioned three-column 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 footer has to be part of the center column. This is because the side columns are not in the document flow, so the footer cannot be set to clear them as in floated layouts.

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 Files

This example uses two CSS files to style the page:

  1. three_column_absoluteCSS.css
  2. text_n_colorsCSS.css

The XHTML markup file is called:

  • three column absolutely positioned layout.html

Note: Inner <div> elements inside each of the five main <div> elements allow padding and borders to be applied without affecting the width of the main structural <div> elements.