HTML, XHTML, and CSS All-In-One Desk Reference For Dummies®

Chapter 2. Building Floating Page Layouts

In This Chapter

• Creating a classic two-column page

• Creating a page-design diagram

• Using temporary borders

• Creating fluid layouts and three-column layouts

• Working with and centering fixed-width layouts

The floating layout technique provides a good alternative to tables, frames, and other layout tricks formerly used. You can build many elegant multi-column page layouts with ordinary XHTML and CSS styles.

Creating a Basic Two-Column Design

Many pages today use a two-column design with a header and a footer. Such a page is quite easy to build with the techniques you read about in this chapter.

Designing the page

It's best to do your basic design work on paper, not on the computer. Here's my original sketch in Figure 2-1.

It's important to draw the sketch first so you have some idea what you're aiming for. Your sketch should include the following information:

• Overall page flow: How many columns do you want? Will it have a header and a footer?

• Section names: Each section needs a name. This will be used in both the XHTML and the CSS.

• Width indicators: How wide will each column be? (Of course, these widths should add up to 100 percent or less.)

• Fixed or percentage widths: Are the widths measured in percentages (of the browser size) or in a fixed measurement (pixels)? This has important implications. For this example, I'm using a dynamic width with percentage measurements.

• Font considerations: Do any of the sections require any specific font styles, faces, or colors? ...