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

123 Figure 4-15: Using the tallest column's borders as column separators.

Since the middle column is tallest, its borders serve as separators. We had to adjust the
margins and padding of the columns to keep the separators away from the column contents,
but that's no big deal. Well, actually, we could have just adjusted the middle column and let
the .column rule alone, like this:

.column { width : 20% ; margin : 0 5% ; float : left ;}
.two { width : 30% ; border : 1px solid gray ; border-width : 0 1px ;
margin : 0 ; padding : 0 4% ;}

h e result would be essentially the same, with maybe a pixel or two of dif erence in the
placement of the separators.

You may be looking askance at some of the numbers there, and with good reason. Where did the
4% on the padding come from, and what about the result that 5% divided by two equals 2% ?

h at brings me to point #3, which is that you have to be careful with l uid columns and
borders. Suppose you had just split the 5% margins in half. With the borders in place, you
would be taking a risk in doing that (see Figure 4-16).

.column { width : 20% ; margin : 0 2.5% ; padding : 0 2.5% ; float : left ;}
.two { width : 30% ; border : 1px solid gray ; border-width : 0 1px ;}