HTML and CSS Reference
In-Depth Information
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.
n
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.
n
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.
n
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
.
n
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.
n
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.
FIGURE 13.7
The sidebar is
positioned as
floating content.
