HTML and CSS Reference
In-Depth Information
position: relative;
}
Note:
if you make
#main
a new containing block you'll revert to the original
stack order. In this case, you'll need to use
z-index
to keep
#sidebar
on
top of
#main.
If you look at step three, you'll see that we are almost there. The last things
to do are mostly cosmetic. I've inserted a base styles sheet:
<link rel="stylesheet" type="text/css" href="http://
tjkdesign.com/ez-css/css/base.css">
and then added these rules:
html {
height: auto;
}
body {
border: 1px solid #efefef;
}
#header,
#main,
#sidebar,
#footer {
padding-bottom: 2em;
}
Why do we need these rules?
• We can reset the height on
html
so the background of
#main
is not
cut-o
"
at the fold (this styling is inherited from the base styles sheet).
• We can draw a border all around the layout.
