HTML and CSS Reference
In-Depth Information
7.
save the style sheet, and reload the page in a browser. The main content now
displays correctly, but the heading at the top of the sidebar is not aligned with the
first paragraph of the main content, as Figure
7-22
shows.
Figure 7-22.
The top of the sidebar is not in alignment with the main content
8.
The misalignment is caused by the default top margin on the “Climate” heading.
Because the sidebar is floated, it's treated as a separate block, and the top margin
pushes the heading away from the top of the block. To remove its top margin without
affecting the other headings in the sidebar, you can use the
:first-child
pseudo-
class, which styles an element that is the first child of its parent. The
:first-child
pseudo-class is supported by all browsers except iE 6. Add the following rule to the
style sheet to align the sidebar with the main content:
h3:first-child {
margin-top: 0;
}
9.
To switch the sidebar to the right, all that's necessary is to move the wide margin to
the right of the main content, and to float the sidebar to the right. make the changes
highlighted in the following two rules:
#main {
width: 65%;
margin-
right:
35%;
}
#aside {
float:
right;
width: 32%;
}
10.
save the style sheet, and load the page into a browser. As Figure
7-23
shows, the
sidebar is now on the right.