HTML and CSS Reference
In-Depth Information
}
#main {
float: left;
}
To which we add:
#wrapper {
border-left: 200px solid #D4C37B;
background-color: #ffe3a6;
border-right: 200px solid #D4C37B;
}
This code sets the background color for the three columns. In the same
sequence as the above declarations.
If you look at this first step, you'll see that we have achieved the background
e
"
ect we are looking for, but things look pretty broken. Everything shows
inside the wrapper's content box.
These next rules should fix the display of the three columns (
zoom: 1
for
the
#wrapper
and
position: relative
for
#sidebar
and
#aside
):
#aside
is given a width and floated to the right. The negative margins pull
each side bar over the wrapper's border — outside of the content box.
Note:
IE 6 and 7 needs
#wrapper
to have a layout, hence the use of
zoom
.
IE 6 needs the two
position
declarations for the same reason as in the
previous demos.
If you look at step two, you'll see that
#header
does not stretch across the
entire layout and that
#footer
is nowhere to be found.
These two rules should take care of everything:
#header,
#footer {
margin-left: -200px;
