HTML and CSS Reference
In-Depth Information
Figure 12-7.
The main content floats to the right into the wide margin created by the sidebar
To put the sidebar on the right, right2col_mainfloat.html reverses the side of the margin on the sidebar and
floats the main content to the left like this:
#sidebar {
width: 29%;
padding: 2%;
margin-
left
: 67%
}
#main {
width: 63%;
padding: 10px 2%;
float:
left
;
}
Using Absolute Positioning for the Sidebar
Instead of floating either the main content or the sidebar, you can use absolute positioning to move the sidebar
alongside the main content. The technique is very similar to floating the sidebar. You put a wide margin on one
side of the main content to make room for the sidebar and then move it into place. To ensure that the sidebar
moves with the rest of the layout at different screen widths, you need to establish a containing block for it by
making the
wrapper<div>
relatively positioned.
The relevant style rules in left2col_absolute.html look like this:
#wrapper {
width: 100%;
min-width: 550px;
max-width: 1000px;
margin: 0 auto;
background-color: #FFF;
background-image: url(images/faux left.jpg);
