Because this design uses two columns, you specify a float: left, but also
ensure that the two columns (plus any padding, borders, or margins) don’t
add up to more than 100 percent. In this example, the leftcolumnclass is
specified at 35 percent the width of the body, and the rightcolumnclass at
65 percent. This way, no matter how the user might resize the browser
(making it wider or narrower), the widths retain their relative sizes, as Figure
12-13 illustrates. The left column is about half the size of the right column.
If you want three or more columns, just create additional classes for column-
threeand columnfour(or whatever you want to call them). And give them
percent widths so that all of the columns (their boxes) added together don’t
exceed a width of 100 percent.
In the above code, the clearproperty is used for the horizontal rule and the
middle headline. Recall that using clearforces the element to move below a
floating element (such as our columns). For more on the clearproperty, see
Chapter 10.
In this example, the right column aligns to the left side of the browser in
Firefox and Netscape (probably to maintain the width of 35 percent in the left
column). If you specify that the right column should float right, the problem
is eliminated in those browsers. Also note that the order in which elements
appear in the markup affects how they are rendered (especially when using
float). For example, placing the right column markup above the left column
flip-flops their display. Changing the right column to float right makes it float
right regardless of whether it appears before or after the left column markup.
Building Fixed Columns ..............................................................................
Freezing your column widths (rather than allowing them to resize as illus-
trated in Figures 12-12 and 12-13) is easy to do. Use a position: absolute
property-value and specify the position and size of your columns (their left,
top, and widthproperties) with fixed units of measurement such as pixels.
Here’s how such a column style looks:
.topheadline {
position: absolute;
top: 25px;
font: bold 48px/.99 “Arial Black”; letter-spacing: -.06em;
padding: 5px; }
.leftcolumn {
position: absolute;
top: 135px;
left:25px;
width:200px;
text-align: justify;}
228 Part III: Adding Artistry: Design and Composition with CSS
