HTML and CSS Reference
In-Depth Information
#inner {
width: 75%;
float: left;
background-image: url(images/faux left.jpg);
background-repeat: repeat-y;
background-position: 33.35% top;
}
#sidebar1 {
width: 30.66%;
padding: 10px 1.33%;
float: left;
}
#sidebar2 {
width: 23%;
padding: 10px 1%;
float: right;
}
#main {
width: 62.68%;
padding: 10px 2%;
float: right;
}
The horizontal background position of the background image for the
wrapper<div>
is
75%
, which ensures
that it's always in alignment with the right sidebar.
As Figure
12-10
shows, the three columns maintain their proportions at different screen widths.
Figure 12-10.
The background images remain in alignment with the sidebars
