User:John Reid/divbox3

Multi-column layout

 * Note that this does not work quite as expected. In CSS, width specifies the width of content, not including padding, margin, or border. So for example, width:33%; generates a box (including everything) wider than 1/3rd of the available width. To allow for some "wiggle room", the template-generated shortcuts are set 5% less than might be expected. To generate multi-column layouts that exactly fill the available width, use a table.


 * Also note that these boxes are all set to float. You'd probably want to clear this float before proceeding.

Color
Box colors can be set with the  parm; if using numbered parms, this is the 1st. This parm selects one from a table of color sets; box background, border color, and title background are set all together. You may also name this parm simply.


 * Note that  does indeed make the box background completely black; black text is invisible against this. It's necessary to reverse text, making it white and bold. Text is reversed and bolded at need, depending on   and whether.


 * uses the same box model but with no colors;  sets the content background to transparent.

Reverse
The  parm takes on one of four values: ,  ,  , or. If this parm is not supplied then both title and content default to black text. Reversed text appears white and bold; this is a typesetting convention as normal-weight text is often hard to read when reversed.

Model
The default box has a 1px solid border with a small amount of margin and padding. This is best for most purposes; many ugly colored boxes are created because the writer fails to include reasonable values for these spacings. The default box also may be called by either equivalent name:  or. Other models are available for more specialized purposes.

Text-align
Title text and content text may each be aligned left, right, or center. These may be set independently from one another and from the overall float/align of the entire box. The parms  and   are used; the alternate parm names   and   are also permitted and work identically. If params are omitted, the title defaults to centered and the content defaults to the left. The value  is equivalent.


 * Note that  left and right not only set CSS  ; they also set   left or right for an internal, invisible box. You may wish to clear floats; in these examples floats are not cleared.


 * The parms covered earlier ( or   and  ) apply only to the entire box. There is no interaction with the float/align of title and content.

Icon
An image may be included with the  parm. This may be floated left or right; it may also be centered. The parm  (or equivalently,  ) may be set with any of the usual values. Size may be set as desired with. If parms are omitted, the default is a 48px image floated left. You may wish to clear this float.