About This Layout

This page is styled with CSS. 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 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 using a style tag file because IE6 does not natively support the min-width and max-width CSS properties.

Promo area

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