HTML and CSS Reference
In-Depth Information
#main {
width: 65%;
margin-left: 35%;
}
3.
you need to assign a width to the sidebar and float it into the space on the left
alongside the main content. Although
35%
of the
wrapper <div>
width is available,
filling it completely will make the page look too crowded. make the sidebar a little
narrower like this:
#aside {
float: left;
width: 32%;
}
4.
save the style sheet, and load the page into a browser. The sidebar is where you
would expect, but most of the main content has disappeared (see Figure
7-20
).
Figure 7-20.
Only the first paragraph of the main content remains at the top of the page
5.
scroll down the page. The first
<h2>
heading in the main content has been pushed
down below the sidebar, as shown in Figure
7-21
.
