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

Styling the Document

Because our goal is to reproduce the book’s layout, we can use it as a point of comparison as we work through the project. There are many ways to attack this problem, but we’ll start by addressing the fundamental basis of the book’s design: the two-column layout it uses to put notes and captions into a sidebar.

The Sidebar

In setting up the sidebar, we really only need to ensure that there’s a border separating it from the main content and that the notes and captions actually make it into the sidebar. This turns out to be a lot trickier than one might have hoped.

We could wrap all of the content in a div and then give the sidebar elements a negative right margin to pull the floats into the sidebar. That would let us set ...

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