• Choose a category
• All
• Classic-Fiction

}

input {

float: left;

background-color: #CCCCFF;

}

button {

float: left;

clear: both;

margin-left: 7em;

margin-top: 1em;

background-color: #0000CC;

color: #FFFFFF;

}

You now have the basic tools in place to use flow layout. Look to Chapter 2 of this minibook to see how these tools are put together to build a complete page layout.

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 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.

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 footer?

♦ Section names: Each section needs a name, which 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?

♦ Color scheme: What are the main colors of your site? What will be the color and background color of each section?

A note to perfectionists

If you’re really into detail and control, you’ll find this chapter frustrating. People accustomed to having complete control of a design (as you often do in the print world) tend to get really stressed when they realize how little actual control they have over the appearance of a Web page.

Really, it’s okay. This is a good thing. When you design for the Web, you give up absolute control, but you gain unbelievable flexibility. Use the ideas outlined in this chapter to get your page looking right on a standards-compliant browser. Take a deep breath and look at it on something else (like Internet Explorer 6 if you want to suffer a heart attack!). Everything you positioned so carefully is all messed up! Take another deep breath and use conditional comments to fix the offending code without changing how it works in those browsers that do things correctly.

This particular sketch (in Figure 2-1) is very simple because the page will use default colors and fonts. For a more complex job, you need a much more detailed sketch. The point of the sketch is to separate design decisions from coding problems. Solve as much of the design stuff as possible first so you can concentrate on building the design with XHTML and CSS.

Figure 2-1: This is a very standard two-column style.

Building the XHTML

After you have a basic design in place, you’re ready to start building the XHTML code that will be the framework. Start with basic CSS but create a div for each section that will be in your final work. You can put a placeholder for the CSS, but don’t add any CSS yet. Here’s my basic code (I removed some of the redundant text to save space):

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href