HTML and CSS Reference
■ Rather than rely on the cascade, you can create a rule with higher specificity. in this case, you could use
.figure.portrait (or .portrait.figure ) as the selector. Then it wouldn't matter which order the classes are defined
in the style sheet. Combining the two classnames in the selector has higher specificity than .figure on its own, and it
affects only elements that have both classes applied to them.
Adding a Sidebar Using the float and margin Properties
Most web page layouts intended for viewing on a desktop consist of two or more columns—one for the main
content, and the other(s) for less important information or advertising. In the bad old days, tables were used to
create the columns. CSS3 promises better methods, but until they're more widely supported, the most common
approach is to use the float property. There are several patterns for creating columns and sidebars, which I'll go
into in detail in Chapter 12 . In this section, I'll concentrate on just one—creating a wide margin and floating a
<div> into it.
The basic technique is very simple. You wrap the content of the page in two <div> elements, one for the
sidebar, and the other for the main content. Of course, if you don't need to support IE 6-8, you can use the new
HTML5 elements, such as <aside> for the sidebar, and <section> or <article> for the main content. You give
the main content a wide margin to make room for the sidebar, and then float the sidebar into the space created by
The downside of this technique is that the sidebar needs to come before the main content in the HTML
markup. However, it has the advantage of being simple to implement, and you can switch the sidebar from left to
right by changing just a couple of properties.
exerCise: adding a sidebar
This exercise shows how to add a sidebar to a page by creating a wide margin alongside the main content
and floating the sidebar into the margin. it uses sidebar_begin.html in the ch07 folder and sidebar_begin.css
in ch07/styles as its starting point. The finished versions are in sidebar_left.html and sidebar_left.css, and in
sidebar_right.html and sidebar_right.css.
The page is basically the same as used in previous examples in this chapter, but content for the sidebar has
been added after the main heading and ahead of the existing content. The sidebar is in a <div> element with
the iD aside , and the existing content has been wrapped in a <div> with the iD main .
1. To make room for the sidebar, change the maximum width of the wrapper <div>
from 650px to 1000px :
margin: 0 auto;
To preserve the width of the main content if the sidebar is shorter, you need to
create a new style rule using an iD selector. Previously, the main content was 650px
wide, which is 65% of 1000px , leaving 35% for the sidebar. so the new rule that needs
to be added to the style sheet looks like this: