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

OUTLINES INSTEAD OF BORDERS
To lead of , I'd like to talk about the use of outlines, which at i rst glance look a lot like borders
but turn out to dif er in ways that are very signii cant to layout. Outlines can be used in
published layouts, and are very handy diagnostic tools when creating and debugging layouts
in progress.
During layout creation, you can visualize the placement of your layout pieces using something
like this (see also Figure 4-1):
div { outline : 1px dashed red ;}
108
Figure 4-1: Outlining the divs .
You might think that the same thing can be accomplished with border , but that's actually
not true. h e reason is that borders participate in layout. Outlines do not.
Here's what I mean: Suppose you have three column div s that are meant to i t into a con-
tainer div 960 pixels wide. (If you dislike pixels, the same thing can happen with ems,
percentages, or any other width measure.) You set each one to float: left; width:
33.33%; and are trying to visualize exactly where the column edges sit. If you add borders,
the last of the three div s will drop below the i rst two (see Figure 4-2). h at's because each
div will have a width of 320 pixels and then right and let borders added to that, which will
make each div 's layout box a minimum of 322 pixels wide. Multiply that by three columns
and you get a total of 966 pixels, which will not i t into a 960 pixel container. Float drop!