HTML and CSS Reference
In-Depth Information
background-position: 33% 0;
background-repeat: repeat-y;
border-left: #252017 solid 1px;
border-right: #252017 solid 1px;
position: relative;
}
#sidebar {
width: 29%;
padding: 2%;
position: absolute;
top: 63px;
}
#main {
width: 63%;
padding: 10px 2%;
margin-left: 33%;
}
An absolutely positioned sidebar on the left doesn't need to set the
left
offset because it occupies the same
horizontal position as it would if it remained in the normal flow of the document.
If you put the sidebar on the right, there's no need for a right margin on the main content, as long as the
main content has a declared width. But you do need to set the sidebar's left offset. The styles for the sidebar and
main content in right2col_absolute.html look like this:
#sidebar {
width: 29%;
padding: 2%;
position: absolute;
top: 63px;
left: 67%;
}
#main {
width: 63%;
padding: 10px 2%;
}
This technique works very well when the sidebar content is shorter than the main content. However, there is
no way of controlling the sidebar's overspill if the main content is shorter. As Figure
12-8
shows, the extra content
in left2col_abs_long.html goes over the footer and continues down the page. (I've changed the footer colors to
make the problem stand out better.)
