HTML and CSS Reference
In-Depth Information
You've now seen examples of a two-column layout where the first or
second column appears on the left. Creating a sidebar on the right just
means putting these pieces together and getting the widths and spacing
settled. Don't forget to swap the background image as well! The follow-
ing code shows changes from the code used in the Figure 7.7 example to
place the
.sidebar
element on the right:
.container {
width: 534px;
padding: 5px;
border: 1px solid black;
background: url(images/bg_faux_columns.png) repeat-y right
➥
top;
overflow: auto;
}
.main {
float: left;
height: 200px;
width: 420px;
margin-left: 0;
border: 1px solid black;
}
.sidebar {
float: right;
height: 220px;
width: 98px;
border: 1px solid black;
}
