Head First HTML with CSS

using margins for two columns
Sharpen your pencil
508 Chapter 12
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 last 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
#main {
}
You’ll find everything you
need to compute the width
of the sidebar in this rule.
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:
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 10px;
margin: 0px 330px 10px 10px;
We’re changing the right margin to 330 pixels
to match the size of the sidebar.