Dreamweaver CS5: 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 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.)

Note

When it comes to designing pages that work in Internet Explorer 6, you’ll encounter many challenges, more so than for any other browser, including later versions of IE. In fact, IE6 is such a scofflaw that you’ll find a section of this chapter dedicated to dealing with that one browser. See Handling Internet Explorer 6 Bugs.

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, or 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-6, left circled). To make the footer ...