HTML and CSS Reference
In-Depth Information
Note:
there is no need to use
clear
on the footer since
#wrapper
contains
both floats.
• Rather than using
overflow
/
zoom
, we use
inline-block
to create a
new block formatting context (this declaration also triggers hasLayout).
The left border will paint a background color behind
#sidebar
.
• Negative margin is used to bring
#sidebar
outside the content box of
the parent's container (to make it overlap the border of
#wrapper
).
The case of IE6:
If the above rules use
position: relative
(twice), it is
because of IE 6. It is applied on
#wrapper
to prevent
#sidebar
from
being clipped outside of its content box. It is also applied on
#sidebar
to
make sure that the elements are “always” painted with the proper o
"
set.
If you look at this first step, you'll see that we have everything working, but
the vertical border is in between the columns. You should also notice that in
browsers other than IE 6 and 7, there is a small gap at the bottom of
#sidebar
(at the bottom
#wrapper
actually). This is because
#wrapper
is
styled with
inline-block
so it is sitting on the baseline of the line box.
The gap you see is the “descender space” (the space reserved for
descenders in lowercase letters).
So these are the rules to remove the gap and create the vertical border:
#wrapper {
vertical-align: bottom;
}
#sidebar {
margin-right: -1px;
border-right: 1px solid #888;
}
#main {
border-left:1px solid #888;
}
