Styling the Document with Positioning

Floating the sidebar to the right was pretty easy, and for this kind of layout it’s often the best choice. It should be noted, however, that it also depends on the order of the content. If the links had been placed at the bottom of the page after the entry, we couldn’t have floated them as we did in the previous section.

In such circumstances, positioning is a better option than floating, so let’s remove the div#sidebar rule from the style sheet and use positioning to reproduce the look we had in the previous section.

From Floating to Positioning

Having taken out the rule that floats the sidebar, we end up with the sidebar wedged between the h1 and the entry, as shown in Figure 9.8.

Figure 9.8. The unfloated ...

Get Eric Meyer on CSS: Mastering the Language of Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.