Dreamweaver CS5: 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 installed? But perhaps the biggest challenge designers face is creating attractive designs that work across different sizes screens. 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 two approaches to this problem: fixed width or liquid layouts (also called fluid layouts). A fixed-width layout 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 display more of your excellent content. Liquid layouts make designing pages more challenging for you, but make the most effective use of your guests’ screen sizes.

• Fixed-width layout. Many designers prefer the consistency of a set width, like the page shown in Figure 9-2 top. Regardless of how wide a browser window is, the page content’s width remains the same. In some cases, the design clings to the left edge of the browser window. More often, it’s centered. With the fixed-width approach, you don’t have to worry about what happens to your design on a very wide (or small) monitor.

  Many fixed-width designs use width of anywhere from 760 pixels to 1000 pixels. To fit a ...