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.

If you want this layout to work completely in IE6, you must add the minmax.js file using a style tag because IE6 does not natively support the min-width and max-width CSS properties.

The Stylib Files

This example uses two CSS files from the Stylib CSS library

  1. 3_col_liquid.css
  2. text_n_colors.css

The XHTML markup file is called

Promo area

This column has a negative margin applied to it to draw it inside of the full width content div. A positive margin on the content div ensures there will be room for it.