Layout - Refactoring HTML: Improving the Design of Existing Web Applications - page 165

1. Fixed width for both columns

2. Fixed width for the left column; percentage width for the content column

3. Percentage widths for both columns

Option 1 is the most common choice, but I rather prefer option 3, though option 2 is sometimes a nice
compromise. The problem with fixing the width is that it's almost guaranteed to be too small for some users and
too large for others. If it's too large, a reader has to scroll horizontally to view the content, and horizontal
scrolling makes text very hard to read. If it's too small, too little text will fit on each line, making for frequent
eye movement and hard-to-read text. Columns that are too small are better than columns that are too large,
but there's simply no way to design one fixed-width layout that suits everyone. It simply cannot be done. At the
very least, the main content column should resize to fit the window width.

The stylesheet to accomplish this is simple and appears in Listing 5.2 . It places the sidebar on the left and the
content on the right. Figure 5.1 shows the rendered document.

Listing 5.2. Liquid-Width, Two-Column Layout, Sidebar on Left

#Content {
float: right;
width: 80%;
}

#Pages {
float: left;
width: 18%;
}

Figure 5.1. A liquid two-column layout with a left sidebar

[View full size image]