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.
Search WWH ::

Custom Search