include "_i/1.h" ?>
HW: Layout-columns
include "_i/2.h" ?>
Layout - multi-column layouts
We'll construct here a fixed-width layout, with side-by-side columns.
-
Starting with 'lotsathumbs', based on our basic fixed-width layout.
-
'Float'ing to move things side-by-side.
- But, floating takes you out of the flow, and the bottom-of-the-container problems.
- Solutions: either <br clear='all'>, or
overflow: auto on container layer.
- Setting the widths (in pixels or percent).
- 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:
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.
include "_i/3.h" ?>