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.