Head First HTML with CSS

Using absolute positioning
We’re now going to create a two column Starbuzz page using techniques similar to
those we used with the float version of the page; however, this time we’ll use absolute
positioning. Here’s what we’re going to do:
1 First we’re going to make the sidebar absolutely
positioned. In fact, we’re going to position it in exactly the same
place that we floated it to before.
2
3
Next, we’re going to give the main content another big margin so
that the sidebar can sit on top of the margin space.
Finally, we’re going to give this a good testing and see how it
compares to the float version.
Changing the Starbuzz CSS
Our XHTML is all ready to go, and the sidebar is right
where we want it (below the important main content). All we need
to do is make a few CSS changes and we’ll have a sidebar that is
absolutely positioned. Open your “starbuzz.css” file and let’s make
a few changes to the sidebar:
#sidebar {
}
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
position: absolute;
top: 128px;
right: 0px;
width: 280px;
layout and positioning
Okay, now we’re going to specify that the sidebar is absolutely
positioned 128 pixels from the top, and 0 pixels from the right
of the page. We also want the sidebar to have a width, so let’s
make it the same as the float version: 280 pixels.
You’ll see where the “128”
came from in a sec...
Remember, we are going back
to the original versions of the
files, which you can find in the
“chapter12/absolute” folder.
You can work out of the “absolute”
folder, or copy the files “index.html”
and “starbuzz.css” into the “starbuzz”
folder and work from there, like we did.
0 pixels from the right
will make sure that the
sidebar sticks to the right
side of the browser.
you are here 523