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

h at color “shines through” the transparent portions of the background images, and all is well.

In cases where you don't want to i ll in column backgrounds, but just want liquid-friendly
separators, you can use the same CSS and replace the images. All you need is the vertically
repeating separator images with no extra; thus, they can be two pixels or i ve pixels or
however many pixels wide to contain just the separator. h en you repeat them vertically with
the same CSS as before.

.inner { background : url(sep01.png) 25% 0 repeat-y ; overflow : auto ;}
.contain { background : url(sep02.png) 75% 0 repeat-y ; overflow : auto ;}

h at's all it takes. If you i nd the separators are of by a pixel or two horizontally, just add a
pixel or two of transparency to the separator images.

THE ONE TRUE LAYOUT
h e name of this layout technique is more than a bit tongue-in-cheek, but its usefulness is
beyond question. Popularized by Alex Robinson in late 2005 (see http://positionis
everything.net/articles/onetruelayout/ ), the core message is this: You can have
l oated columns laid out in an order independent from the document source order. h is is a
signii cant improvement on simple l oated columns (see previous sections), whose layout is
tied to source order.

131

To make this work, you need only your columns in div s and some CSS. No extra container
elements are necessary, as was the case with previous attempts to permit source-independent
l oat layout.

We start, as usual, with a set of three columns. In this case, the page's “main content” is in the
i rst column, and the “secondary” content and navigation links go into the next two columns.

< div class ="column one " > ... </ div >
< div class ="column two " > ... </ div >
< div class ="column three " > ... </ div >

To start things out, we'll l oat them all let and set some widths (see Figure 4-25). To keep
things simple, we'll use pixel widths, but please note that this works just as well with ems or
percentages. (h e only restriction is that all the columns use the same units for their width,
and even that is bendable.)

.column { float : left ; padding : 0 20px ; margin : 0 20px ;}
.two , .three { width : 200px ;}
.one { width : 300px ;}