Dreamweaver CS6: The Missing Manual

Overcoming Common CSS Problems

As you get more adventurous with CSS, you’ll probably encounter—as many web designers have before you—some of the weird intricacies of working with floated elements (“floats”). This section describes a few common problems and their solutions. (And if you ever stumble on a problem not listed here, you can always take it to one of the online forums listed in Appendix A on page 929.)

Clearing and Containing Floats

As you learned in the last chapter, the CSS float property is a powerful design tool. It’s the only way to get content to wrap around other content: Floating a photo lets text below it move up and wrap around the image. When you create float-based column designs, though, sometimes you don’t want content to move up and next to a floated element. For example, you probably want to keep copyright notices, contact information, and other housekeeping details at the bottom of your web page, below all the other content.

In the CSS layouts discussed in the last chapter, you saw that if the main column of content is shorter than either of the floated sidebar columns, the footer moved up and around the left-floated column (Figure 10-4, left, circled). To make the footer stay below the sidebars, you use the clear property (Understanding the Box Model). It prevents an element from wrapping around floats (Figure 10-4, right, circled).

Figure 10-4. You don’t always ...