About This Layout

The Concept

The four structural divs—header, nav, content and footer—nest inside a fixed width containing div. The nav column is fixed width and floated, and the content column is auto width, unfloated. The footer is cleared so it sits beneath whichever of the columns is longest.

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. 2_col_liquid.css
  2. text_n_colors.css

The XHTML markup file is called

Note: Inner divs inside each of the four main divs allow padding and borders to be applied without affecting the width of the main structural divs.