HTML and CSS Reference
In-Depth Information
Step four shows how things look before we tackle the vertical borders.
ADDING VERTICAL BORDERS
The following technique is inspired from the companion columns technique
(Ingo Chao) and the Nicolas Gallagher method.
To get the e
"
ect we want (two borders touching each other), we use
generated content to which we apply a background color and a border.
THE CSS
html:before {
content: ".";
position: absolute;
height: 20px;
background: #45473f;
left: 0;
right: 0;
z-index: 2;
}
body {
border-top: 0;
}
#header {
border-top: 1px solid #fff;
}
#wrapper {
position: relative;
}
#header,
#footer {
z-index: 1;
}
#wrapper:before,
