Layout - multi-column layouts

We'll construct here a fixed-width layout, with side-by-side columns.

  1. Starting with 'lotsathumbs', based on our basic fixed-width layout.
  2. 'Float'ing to move things side-by-side.
  3. But, floating takes you out of the flow, and the bottom-of-the-container problems.
  4. Solutions: either <br clear='all'>, or overflow: auto on container layer.
  5. Setting the widths (in pixels or percent).
  6. Using a background image, like this one:

    and setting up the columns on top of these

Homework

Your assignment is to add a third, 'floating' column on the right, containg this sort of thing:

Links

You'll need to create a new graphic to use as the background image.

Table-like layout

So, once we know how to float columns beside each other, you might imagine grouping those columns into rows to make something that is reminiscent of older HTML table-based layouts.