Menu – lcation – address

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.

 

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.