HTML and CSS Reference
In-Depth Information
So to prevent any float and margin collapsing issues we make all the main
boxes block formatting contexts.
#header,
#footer {
overflow: hidden;
zoom: 1;
}
#main {
float: left;
}
#sidebar {
margin-right: -200px;
}
Note
: if things look a bit di
"
erent in IE 6 and 7 it is because in these
browsers
default
margins do collapse inside block-formatting contexts. The
following should also be considered:
•
overflow
and
zoom
on
#header
and
#footer
make these elements
new block formatting contexts.
• For
#main
we use
float
rather than
overflow
to prevent potential
issues if we had to o
"
set some nested content.
• The negative margin keeps
#main
into place because now that it is a
float, its border box comes
next
to the margin box of
#sidebar
(the
negative value must match the dimension of the said box).
If you look at the second step, you'll see that the border of
#main
hides
#sidebar.
This is because of the stacking context. In the flow (tree order),
#main
comes after
#sidebar
so the former overlaps the latter.
Positioning
#sidebar
brings it up in the stack.
#sidebar {
