CSS I-Page: Liquid Header & Footer

This simple CSS layout resembles an upper case letter I, hence the name I-Page. The header and footer are each 100% screen width or liquid, while the page content is confined to a fixed-width, centered division. Feel free to experiment with your own backgrounds, images and container widths.

View, Page Source in your browser to see the CSS & HTML code.

This layout tested and works in IE5, 6, 7, 8, Firefox 3.x, Opera 9, Safari 3, 4, and Chrome.

.floatLeft

Here is some content inside a floated left container.

  1. Lorem ipsum dolor sit amet
  2. consectetur adipiscing elit
  3. in eu ultrices magna
  4. ut aliquam ante at mauris

.floatRight

Here is some content inside a floated right continer.

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit
  • in eu ultrices magna
  • ut aliquam ante at mauris

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu ultrices magna. Ut aliquam ante at mauris vulputate non auctor urna interdum. Nulla non placerat nisl.

Regular Text Links:

link item | link item | link item