HTML and CSS Reference
In-Depth Information
The background in left2col_faux.html uses an image that is 1000px wide and just 10px high. The left 330px
(or 33% ) forms the background for the sidebar, while the rest of the image is white. It's used as the background for
the wrapper<div> , and tiled vertically like this:
#wrapper {
width: 100%;
min-width: 550px;
max-width: 1000px;
margin: 0 auto;
background-image: url(images/faux_left.jpg);
background-position: 33% 0;
background-repeat: repeat-y;
border-left: #252017 solid 1px;
border-right: #252017 solid 1px;
The horizontal value for background-position is 33% , so the sidebar's width ( 29% ) and padding ( 2% on
both sides) must add up to the same amount. The same percentage value is applied to the left margin of the
main<div> :
#sidebar {
float: left;
width: 29%;
padding: 2%;
#main {
margin-left: 33%;
padding: 10px 20px;
As Figure 12-6 shows, this produces columns of equal height that maintain the same proportions at different
screen widths.
Search WWH ::

Custom Search