About This Layout

This page is styled with CSS. It demonstrates a float-based two-column liquid layout.

The Concept

The four structural <div> elements — header, nav, content and footer — nest inside a fixed width containing <div>. The two columns, nav and content, are sized with percentages and are floated so they sit side by side. The footer is cleared so it sits beneath whichever of the floated columns is longest.

Auto left and right margin settings are no longer needed in this liquid since the layout always fills the available horizontal space.

The Files

This example uses two CSS files to style the page:

  1. two_column_liquidCSS.css
  2. text_n_colorsCSS.css

The XHTML markup file is called:

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