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:
- 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 layout gets no wider and 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
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
The XHTML markup file is called