HTML and CSS Reference
In-Depth Information
Move the sidebar just below
the header
It's a fact of life that when you float an element, you
need to move the HTML for the element directly below
the element that you want it to follow. In this case, the
sidebar needs to come under the header. So, go ahead
and locate the sidebar
<div>
in your editor and move
the entire
<div>
to just below the header
<div>
.
You'll find the HTML in the file “index.html” in the
“chapter11/starbuzz” folder. After you've done that and
saved, reload the page.
Now the s
idebar should
be on
top of th
e main content
area.
Set the width of the sidebar
and float it
Let's set the width of the sidebar to 280 pixels. And to float the
sidebar, add a float property to “chapter11/starbuzz.css”, like this:
We
're using an id
selector to se
lect the
ele
ment with the
id “sidebar”,
which we
kn
ow is the <div
> for the side
bar.
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 280px;
float: right;
}
We'r
e setting the
width of the
cont
ent area to 2
80 pixels.
