Creating a Website: The Missing Manual, 3rd Edition

Creating a Layout with Multiple Columns

As you’ve seen, style sheets let you place elements at fixed locations on a page, with no wrapping involved. Used carelessly, this leads to scrambled pages. But used carefully, it lets you create some of the most common and classic web page layouts. The trick is to create several boxes, some for text and others for images, and position the boxes next to each other on the page (see Figure 9-5). That way, text and pictures will remain carefully and rigidly separated.

Figure 9-5. Here, a grouping of four <div> elements creates a classic three-column page design, with a header at the top. You can download this page, along with all the examples from this chapter, at www.missingmanuals.com/cds/caw3.

One of the most common website designs is to divide a page into two or three columns. The column on the left typically holds navigation buttons or other links. The column in the middle takes up the most space and includes the main content for the page. The column on the right, if present, displays additional information, like an advertisement or another set of links.

Building this example is surprisingly easy. But before you can position the <div> elements that shape the page, you need to decide whether you want a fixed-width layout or a resizable one. (Flip back to The Challenge of Screen Space for a summary of the differences.) In the following sections, ...