CSS: The Missing Manual

Types of Web Page Layouts

Being a Web designer means dealing with the unknown. What kind of browsers do your visitors use? Do they have the latest Flash Player plug-in installed? Perhaps the biggest issue designers face is creating attractive designs for different display sizes. Monitors vary in size and resolution: from petite 15-inch 640 x 480 pixel displays to 30-inch monstrosities displaying, oh, about 5,000,000 x 4,300,000 pixels.

Float-based layouts offer three basic approaches to this problem. Nearly every page design you see falls into one of two types—fixed width, or liquid. A fixed width gives you the most control over how your design looks, but can inconvenience some of your visitors. Folks with really small monitors have to scroll to the right to see everything, and those with large monitors have wasted space that could be showing more of your excellent content. Liquid designs make controlling the design of the page more challenging, but make the most effective use of the browser window. An elastic design combines some advantages of both.

• Fixed Width. Many designers prefer the consistency of a set width, like the page in Figure 11-2, top. Regardless of the browser window's width, the page con-tent's width remains the same. In some cases, the design clings to the left edge of the browser window, or, more commonly, it's centered in the middle. With the fixed-width approach, you don't have to worry about what happens to your design on a very wide (or small) monitor. ...