Columns & Units
Our framework is built a 13-column layout. It is 974 pixels wide, overall, which allows for maximum real estate on a majority of monitors. Columns are 62 pixels wide, with gutters of 12 pixels. There's also a 12-pixel margin on either side. (13 x 62) + (14 x 12) = 974.
Units span from one to 13 columns and vary in length, based on their content. Using 13 columns allows us lots of flexibility while still keeping visual rhythm and container sizes appropriate for standard ads.
Units are coded with "double divs" to ensure proper padding and margins cross browser. Here's how a double div should look in your code:
<div class="unit span-5">
<div class="plain">
Your content here.
</div>
</div>
Arrangement of Units
All units float left, leaving other units to wrap (and sometimes stack) to the right [figure 2]. If the wrapping units are taller than the first, they'll float down to the beginning of the next line [figure 3]. To keep them from doing so, put them in a "container" div set [figure 4]. When they stack and you don't want them to, insert a "clear" div set [figure 5]. To determine a width for a block of units, you can set the span-width of the containing div set [figure 6] or you can insert clear div sets after every X units [figure 7].
enlarge
enlarge
enlarge
enlarge
enlarge
enlarge
enlarge
enlarge
enlarge
enlarge
Style of Units
Units designated as "plain," "tinted" (light), "shaded" (dark) or "dotted" will have content presented accordingly. For instance, a shaded background requires pale text for legibility.
Background and border colors are site-specific.
This is a dotted span-4 with a "small right" image. Any of these stylized double divs — tinted, shaded, outlined or dotted — will need to have a "clear" div before closing if an image is floated inside, as here. or the background color or border may stop short of the floated content.