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.
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 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