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:
- The center content column changes width as you change the browser width.
- The
min-width
setting prevents the content being crushed down to nothing; once the content reaches minimum width, the layout gets no narrower. - 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. - 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 script
tag file because
IE6 does not natively support the min-width
and max-width
CSS properties.