Eric Meyer

on CSS

cover image
Available now!

Multicolumn Layout

Project 9

preview image 1 preview image 2 preview image 3
Project files
Project 9 ZIP file Project 9 StuffIt file

After a lifetime of reading newspapers and magazines, we're used to seeing text laid out in multiple columns. It's one of the most common conventions in Western typography, so of course it's one of the most requested features of Web layout. And yet multiple columns of text in a Web page isn't always a good idea. Because of the nature of the Web, a user faced with a multiple-column page might have to scroll downward to read the first column, scroll back up to the top of the second, and so on for every new column.

On the other hand, multicolumn layout corresponds to a very common Web design technique: putting links next to the main text of a page. Traditionally, this has been done with a table that has the main body of the page in one cell and the sidebar links in another. We can do the same thing with CSS and keep the markup a lot simpler in the process.

In Project 9, the reader is invited to consider how multiple "columns" on a page can be used to reproduce more traditional table-based layout with much more simple markup. The same basic layout is created using floated elements and then restyled with positioning. With the addition of a third column, the positied layout is moved back to using floats. This is done to illuminate the advantages and disadvantages of each approach.

Errata

Page 201

In the last code block on the page, the keyword 20% should not be red, since it did not change.