HTML and CSS Reference
In-Depth Information
What we want to do is set a right margin on the main content section so that it's the
same width as the sidebar. But how big is the sidebar? Well, we hope you aren't already
rusty since the previous chapter. Here's all the information you need to compute the
width of the sidebar. Check your answer in the back of the chapter.
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 280px;
float: right;
}
Setting the margin on the main section
The width of the sidebar is 330 pixels, and that includes 10 pixels of left margin on
the sidebar, which will provide the separation we need between the two columns
(what the publishing world calls a “gutter”). Add the 330-pixel right margin to the
#main
rule in your “starbuzz.css” file, like we've done below:
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 330px 10px 10px;
}
We're changing the r
ight margin to 330 pixels
to match the size o
f the sidebar.
