HTML and CSS Reference
In-Depth Information
#wrapper:after {
content: ".";
position: absolute;
width: 1px;
height: 2000px;
background: #9c9965;
bottom: 0;
}
#wrapper:before {
left: 0;
border-left: 1px solid #fff;
}
#wrapper:after {
right: 0;
border-right: 1px solid #fff;
}
body {
position: relative\9;
z-index: -1;
}
OK, so what's going on here?
• The fake borders get out of the container (at the top), so the first rule
paints generated content on top of them. Note that we would not need
this rule if the color of the fake borders was the same as the page's
background (
html
), or if there was no gap between the top of the
viewport and the layout.
• Because these borders are painted over the border around
body
, we
move the top border from
body
to
#header
.
• To properly position the fake borders, we need to make the wrapper
the containing block for the generated content.
