HTML and CSS Reference
In-Depth Information
You can easily extend the previous two-column layout to incorporate
a margin wide enough to float two of the three columns into. However,
the size of the main column or the source order may dictate that a differ-
ent arrangement is needed. Here is some trickery with floating and
negative margins to get small left and right columns and allow the main
content area to be first in the document (
Figure 7.8
).
Figure 7.8
A three-column,
fixed-width
layout.
.container {
width: 534px;
padding: 5px;
border: 1px solid black;
background: none;
overflow: auto;
}
.main {
float: left;
height: 200px;
width: 318px; /* narrower to fit new element and gutter */
margin-left: 107px; /* make room for left column */
border: 1px solid black;
}
.left_sidebar { /* renamed, again, for clarity */
float: left;
(continues on next page)
