A Three-Column Fluid Center Layout

About This Layout

This page is styled with CSS. This layout uses negative margins to create this feature-rich layout.

Key Features

Resize this page to see the following:

  1. The center content column changes width as you change the browser width.
  2. The min-width setting prevents the content being crushed down to nothing; once the content reaches minimum width, the layout gets no narrower.
  3. The max-width setting prevents the content getting too wide; once it reaches maximum width, the layout gets no wider and the auto margins center the layout in the browser window.
  4. The footer sits below whichever column is longest.

A code example from Stylin’ with CSS, Third Edition by Charles Wyke-Smith. Visit stylinwithcss.com for more CSS information and updates.