LAYOUTS - CSS: Professional Techniques for Modern Layout - page 123

h ey'll most likely be l oated, since positioning is generally a really bad solution for column
layout. h e key making this technique work (see Figure 4-17) is to make sure the columns
have pixel widths, and really pixel everything (except, we hope, font size).
.column { width : 300px ; margin : 0 5px ; padding : 0 5px ; float : right ;}
125
Figure 4-17: Placing the three columns.
Now all we need is a way to “paint in” a set of separators. We'll need an element that's at least
as tall as the columns themselves, and ideally exactly as tall. Something like a container div .
< div class="contain">
< div class="column one">...< / div>
< div class="column two">...< / div>
< div class="column three">...< / div>
</ div>
Now we need two things. First is to contain the l oated columns.
div.contain { width : 960px ; overflow : auto ;}
Second is an image that, when i lled into the background of that container, will dei ne the
column separators, as in Figure 4-18.