HTML and CSS Reference
In-Depth Information
Figure 10-10.
A close-up view of one corner of the content box shows the partially transparent background and subtle
grain texture
There are two columns inside this outer content wrapper—or there will be as soon as we float their
containing blocks in opposite directions. We'll need to give each column a width or else they'll “shrink-
wrap” to the size of their contents, and we need to make sure the combined total widths don't exceed the
width of the container to ensure the sidebar won't drop under the main column. Using percentages for the
column widths allows them to contract and expand to fit the liquid layout.
We'll split the page roughly in thirds, with the main column taking up two thirds of the page, leaving the
remaining third for the sidebar. Following basic mathematics, the main column should be around 66% of
the page width and the sidebar should be about 33% (we're rounding these numbers off to whole
percentages). The math is easy enough but these widths won't leave much of a gutter between columns,
only 1%.
We need to add a touch more margin around each column but we have to keep the proportions liquid.
Margins or padding declared in a fixed unit like pixels wouldn't adjust to the liquid page width, so we might
see unfortunate float collisions in narrower windows. Using percentages for the margins will let the margins
flex and adjust along with everything else, and we'll subtract the width of the margins from the width of the
columns to keep things in order. Adding an extra 1% margin on either side of each column means
subtracting 2% from each width, arriving at our final width values for the content columns, as you can see
in Listing 10-18.
Listing 10-18.
The main column floats to the left and occupies two thirds of the page while the sidebar floats to the right
and occupies the remaining third
.main {
float: left;
width: 64%;
margin: 0 1% 20px;
}
.extra {
float: right;
width: 31%;
margin: 0 1%;
}
We'll need to clear these floating columns, of course, or else the content box around them will collapse
and we'll lose that nice translucent background that makes our text readable. Once again the trusty
