HTML and CSS Reference
In-Depth Information
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:
First we're going to make the sidebar <div> absolutely positioned.
In fact, we're going to position it in exactly the same place that we
floated it to before.
1
Next, we're going to give the main content another big margin so
that the sidebar can sit on top of the margin space.
2
Finally, we're going to give this a good testing and see how it
compares to the float version.
3
Changing the Starbuzz CSS
Our HTML is all ready to go, and the sidebar <div> 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:
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.
#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;
}
Okay, now we're going t o specify th at the sideb ar is absolute ly
positioned 128 pixels f rom the top, and 0 pixels from the r ight
of the pa ge. We also w ant the sideb ar to have a width, so le t's
make it t he same as th e float vers ion: 280 pixe ls.
Zer o pix els f rom the
righ t wi ll ma ke su re t hat
the side bar stick s to the
righ t sid e of the bro wser .
 
Search WWH ::




Custom Search