HTML and CSS Reference
In-Depth Information
border-left: 200px solid #d4c37b;
}
#footer {
clear: left;
background: #9c9965;
}
What do these rules do exactly?
• We style
html
with a background to prevent the browser from painting
the background color of
body
outside
our layout.
• We style
body
with auto margin to center the layout; the width is set
using percentage. The background declaration is for
#main
.
• We style the background of
#header
to mask the background color of
body (the same goes for
#footer
).
• The background color of
#sidebar
matches the border color of
#main
.
This is the trick we use to make our columns appear as being of
equal height.
• The footer clears any previous float so it stays below the columns, at the
bottom of the layout.
If you take a look at this first step, you'll notice that the heading in
#sidebar
is not vertically aligned with the heading in
#main
and that we
have some gap at the top and bottom of the
#sidebar
.
This is because out
of these two containers, only one is a block formatting context. So margins
do not collapse in
#sidebar
while they do in
#main
.
This also means that
#main
will not contain floats and that applying
clear:left
to any nested
element in there will clear
#sidebar
as well.
