Chapter 9. Building CSS Layouts


We adore chaos because we love to produce order.

 --M. C. Escher

By the time 2003 began in earnest, a rather sizable snowball was rolling. In October of 2002, Wired News abandoned traditional table-driven layout methods for a CSS-driven design. At that time, Wired wasn't the first redesign of its kind, but it was certainly the most highly trafficked. The site's chief designer, Douglas Bowman, took a highly visible and well-established brand and delivered a compelling new design — all with standard technologies such as CSS and XHTML that would, as Bowman put it, help "lift the Web out of the dark ages" (Wired News, "A Site for Your Eyes":,1284,55675,00.html).

For the next few months, you could almost hear the crickets chirping. Wired News had lifted style sheets out of the realm of academics and saber-waving standards advocates and placed them squarely and confidently in the realm of mainstream.

On Grids and Layouts

Layouts come from the practice of designing with grids. By dividing up a page into logical, repeating sections, you can bring order to chaos. With humans looking at the page and wanting to get on with their lives, content needs to be organized into a sane presentation. Grids and, by extension, the layouts they create allow you to create that presentation.

An excellent example of layouts in everyday usage is the newspaper. Every day the front page has to promote dozens of stories and elements covering a range of ...

Get Professional CSS: Cascading Style Sheets for Web Design, Second Edition now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.