O'Reilly logo

Eric Meyer on CSS: Mastering the Language of Web Design by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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%); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required