[an error occurred while processing this directive] IT 280: Layout Examples using CSS [an error occurred while processing this directive]

Layout examples using CSS

A few examples of pages using a columnar layout

Faux Columns - using a background image

This technique uses a background image to create the illusion of columns. The blocks are floated into position over it.

For two column, it can used for both fixed-width and liquid designs.

For three (or more) columns, only a fixed-width design can be created.

  1. A simple two-column page with fixed-width side column, header and footer.
  2. Simple page With background colors added
  3. The faux columns solution
  4. Simple page with proportional-width side column
  5. Fixed-width Page with proportional side column
  6. Fluid Page with proportional side column

References

Colors only - no images

These use negative margins to place the blocks over a wide border. They work as intended in Firefox and in IE 7

In each, the content div comes first in the HTML, which can be desirable when styling is supressed.

Both two-column and three-column designs can be either fixed-width or liquid.

  1. A two-column page Fixed width.
  2. Simple page Two columns, liquid design
  3. The Three columns, fixed width
  4. The Three columns, liquid width

References

Adding a caption to an image

Floating an image is a familiar technique. Placing it in a floated box lets you associate a caption with an image.

Both two-column and three-column designs can be either fixed-width or liquid.

Exercise 04 - Part 1

Redesign your IT 280 Table of COntents page to have:

You should:

[an error occurred while processing this directive]