Template:Div col/doc

This is the documentation subpage for the parent Template:Div col page.

Usage:: Set up a multi-column layout for contents (to be used along with {{Div col end}} after these contents).

Syntax:

{{Div col

|1=cols

|2=colwidth

|3=gap

|rules=

|margin-top=

|small=

|style=

}}

Parameters:

cols= or 1= (optional): number of columns. Deprecated, as it may not work well with various screen sizes or orientations and with accessibility options. Due to accessbility problems, the actual number of columns should be converted to a minimum column width: cols=1 gives colwidth=24em (columns will be at least 24em, but never more than 36em, suitable for paragraphs), cols=2 gives colwidth=16em (never more than 24em), etc.
colwidth= or 2= or (optional): minimum width per column (the actual column width will never be 50% larger if 1 column can fit, 33% with 2 columns, 25% larger with 3 columns, etc.). Preferred for accessibility. Suggested value: "24em" for paragraphs, "16em" for lists of titles, "12em" for people/user names. This suggested value may be adjusted for better fitting if there are gaps between columns, or if the column contents have a fixed or narrow width.
gap= or 3= (optional): width of gap between columns: at least "0.5em" if thin vertical rules are displayed, otherwise "0" if the content is a numbered or bulleted list or a block with its own horizontal margins, otherwise at least "1em" (normal paragraphs). The default value is "1em".
rules= (optional): set to "yes" to display thin vertical rules in the middle of gaps between columns ("thin solid" by default, in the same color as the text), or to a specific style (e.g. "1px dotted #AAA"). Rules should always be visible if there are narrow gaps and the content has minimal horizontal margins, especially if the content text is justified. If rules are present, the horizontal width of gaps between columns should be at least the width of the vertical rule plus 2 pixels (i.e. 1 pixel on each side of the rule which is drawn vertically in the middle of the gap).
margin-top= (optional): indicates the top margin of the first block in the content. It is ".3em" by default (suitable for lists of items) and should be set to ".5em" if the first block is a normal paragraph, so that columns of text will correctly align horizontally.
small= (optional): set to "yes" to reduce the font size of the contents (this also coherently affects the size and positioning of the main box containing the columns, and the size and positioning of individual columns).
style= (optional): extra styles applicable to the container box (such as background and foreground colors, border, padding, line-height, text justification, etc.).

Examples :

{{Div col|colwidth=18em|gap=0|style=border:1px solid #AAA}}

* Item 1

* Long item 2

* Longer item 3

* A bit longer item 4

* This is a much longer item 5

* This is finally a very, very, very, much more extensive item 6 which could span multiple lines (it could be along paragraph with multiple sentences).

{{Div col end}}

generates:

Item 1
Long item 2
Longer item 3
A bit longer item 4
This is a much longer item 5
This is finally a very, very, very, much more extensive item 6 which could span multiple lines (it could be along paragraph with multiple sentences).

{{Div col|colwidth=18em|rules=1px dotted #AAA|style=border:1px solid #AAA}}

* Item 1

* Long item 2

* Longer item 3

* A bit longer item 4

* This is a much longer item 5

* This is finally a very, very, very, much more extensive item 6 which could span multiple lines (it could be along paragraph with multiple sentences).

{{Div col end}}

generates:

Item 1
Long item 2
Longer item 3
A bit longer item 4
This is a much longer item 5
This is finally a very, very, very, much more extensive item 6 which could span multiple lines (it could be along paragraph with multiple sentences).

{{Div col|colwidth=18em|rules=yes|gap=1em|margin-top=.5em|style=border:1px solid #AAA;background:#FFC;color:#00F;padding:.5em;text-align:justify}}

Small paragraph.

Another small paragraph.

This is another small paragraph.

This is a longer paragraph which spans several lines of text.

Intermediate short paragraph.

This is now a more extensive paragraph whose text could span multiple lines. It can contain multiple sentences and can wrap anywhere, including in the middle of sentences.

This is a finally an average paragraph also spanning several lines.

{{Div col end}}

generates:

Small paragraph.

Another small paragraph.

This is another small paragraph.

This is a longer paragraph which spans several lines of text.

Intermediate short paragraph.

This is now a more extensive paragraph whose text could span multiple lines. It can contain multiple sentences and can wrap anywhere, including in the middle of sentences.

This is a finally an average paragraph also spanning several lines.

See also:

{{Div col end}}
{{Columns}}, {{Columns/style.css}}
{{Column-width}}, {{Column-gap}}, {{Column-rule}}