HTML and CSS Reference
In-Depth Information
Figure 12-6.
The single background image creates the illusion of equal-height columns
To switch the sidebar to the right, you need a background image that has the narrower column's background
on the right. You also need to change the horizontal background position of the image. Otherwise, it's just a
question of floating the sidebar in the opposite direction, and switching the margin on the main content to the
other side. The relevant styles in right2col_faux.html look like this:
#wrapper {
width: 100%;
min-width: 550px;
max-width: 1000px;
margin: 0 auto;
background-color: #FFF;
background-image: url(
images/faux_right.jpg
);
background-position:
67%
0;
background-repeat: repeat-y;
border-left: #252017 solid 1px;
border-right: #252017 solid 1px;
}
#sidebar {
width: 29%;
float:
right
;
padding: 2%;
}
