Painting the Web

Flexible Designs

For the last several years, I have primarily used a fixed-width design at my web sites. It looks the same for everyone, and I can use a single piece image for the header and ensure that the text width area doesn't get too big or too small to read. The disadvantage to the approach, of course, is that the fixed width can be too small for some computer monitors or too large for others. There's also something constrained about a fixed width.

There are two main layout types: fixed and flexible. Within the flexible page layout category there are two subcategories: liquid and elastic.

The liquid design is one where no width is specified, or widths are specified as a percentage of the browser page size for all columns, or at least the main content column. The problem with this type of design is if the text area becomes too large, the text is too spread out, making it difficult to read. The advantage, though, is that it works quite well with float for flexible side-by-side columns.

The other flexible design type is the elastic design. The advantage of an elastic design is that text columns never get too large, and the overall page size can flex to meet whatever the browser window width is. The disadvantage is that horizontal scrollbars may appear where you least expect them when pages are shrunk down, not to mention columns shrinking to virtually nothing. The biggest problem, though, is mixing elastic widths with float for side-by-side columns.

One important component to the ...