Eric Meyer on CSS: Mastering the Language of Web Design

Refloating the Design

Positioning is certainly interesting, and in some cases, it’s the only option available. With the particular design we’ve created, however, floating is still an option even with three columns. So let’s convert the positioned sidebars back to floated sidebars partly for the heck of it but also to spend a little more time exploring the differences between positioning and floating elements.

Bringing Back the Float

The first step is probably the most obvious. We can take the rule for div#sidebar found in Listing 9.2 and use it to replace the positioning rule in Listing 9.3.

div#entry {margin: 0 20% 1em 20%; padding: 0;}
div#sidebar {margin: 0; padding: 0; float: right; width: 25%;} div#sidebar h4 {background: rgb(70%,70%,55%); ...