HTML and CSS Reference
What does this style sheet do?
The first section just duplicates the site navigation bar code from Listing 13.2 so
that the entire style sheet can be replaced by this one.
Starting at the second comment, the code for positioning the columns appears. The
first rule sets the #main section to have a wide gutter on the left, which is where we
will be placing the sidebar.
Both the #content and #sidebar sections are set to float. This means that they line
up on the left side of the #main section, just inside the padding.
A width is given to the #sidebar of 10em. The size was chosen because that allows
1 em of space around it, after it is placed inside the 12 em gutter set by the
padding rule on #main .
A negative margin is set on the left side of the #sidebar , which actually makes it
overlay the #content section. Relative positioning is then used, via the right and
top rules, to push the sidebar into the correct place in the gutter.
Figure 13.7 shows this style sheet applied to the HTML file in Listing 13.1, along with
the colors and fonts style sheet in Listing 13.3 and the style sheet from Listing 13.4,
which relocated the site navigation menu.
The sidebar is
Search WWH ::