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
.