Graphics Programs Reference
In-Depth Information
122
Figure 4-14: Three simple columns.
h at's the basic drill. By itself, it's nothing more than a simple two-column setup plus one
column. h e reason I bring it up is to explore a few things about l oated-column styling.
First is that, as you may have noticed here or in the preceding section, the let and right
margins of l oated elements don't “collapse.” Instead, the outer margin edges touch and sit
right next to each other. h us, in the preceding bit of CSS, the columns will be 10% apart—5%
plus 5%. If we were to convert the 5% to 20px , the columns would then be 40 pixels apart.
Second is that it's hard to put “full-height” separators between columns. h is is one of those
CSS limitations that has been bugging people for over a decade now, but it still exists and we
still have to deal with it. However, with a three-column setup, if you know the middle column
will always (and I mean always) be the tallest, you can give it side borders to create lovely
separators.
It takes a little massaging of the CSS, but not much (see Figure 4-15).
.column { width : 20% ; margin : 0 2% ; padding : 0 2% ; float : left ;}
.two { width : 30% ; border : 1px solid gray ; border-width : 0 1px ;}
 
Search WWH ::




Custom Search