HTML and CSS Reference
In-Depth Information
Step one: Start with the sidebar
We're basically swapping the roles of the sidebar and the main content area. The
content area is going to have a fixed width and float, while the sidebar is going to wrap
around the content. We're also going to use the same margin technique to keep the two
visually separate. But before we start changing CSS, go to your “index.html” file and
move the “sidebar” <div> down below the “main” <div> . After you've done that, here
are the changes you need to make to the sidebar CSS rule:
#sidebar {
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 470px;
width: 280px;
float: right;
Because the sidebar is now going t o flow
under the main content, we need to move the
large margin to the sidebar. The total width
of the main content area is 470 pixels. (Go
ahead and compute that yourself in all that
free time you have. Compute it in the same
way as you did for the sidebar. Yo u should
know that we're going to set the width of
the main content area to 420 pi xels.)
Step two: Take care of the main content
Now we need to float the main <div> . Here's how to do it:
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
width: 420px;
float: left;
Step three: Take care of the footer
Now we just need to adjust the footer to clear everything to the left, rather than the right.
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: left;
Search WWH ::

Custom Search