Template:Column-width
-moz-column-width:24em;-webkit-column-width:24em;column-width:24em;
- Usage:
- Generates some CSS styles to ensure compatibility with most browsers.
- Syntax:
-
{{Column-width|column width}}
- Parameters:
-
1=Minimum width of column in a block of content with multicolumn layout,24emby default.
- Notes:
-
- If the available width for the content of the container block is larger than twice this value plus one column gap, multiple will be created, as many than can fit including their separation gap. All columns will then be augmented to fill equally the remaining free width in the container.
- If the available width for the content of the container block is smaller than twice this value plus one column gap, only one columnn will be used, no gap will be inserted. That column will then be adjusted to just fit the container width.
- Unless you want to create layouts for images whose sizes are in pixels, you should always use widths measured in
emaccording to the content (this size is proportional to the font-size, trying to minimize the number of line breaks, but still avoiding to use excessive widths that are difficult to read. - The default 24em is good for easier reading of long paragraphs of texts (columns will be never be enlarged to more than 36em when fitting the available width of the container, because another column will be created).
- But for presenting a bulleted or numbered list of narrow items in multiple columns, you may want use a narrower value to avoid creating very long vertical lists
- If items in the list are very narrow, you should probably use horizontal list instead (using inline items), separated only by punctuation or symbols.
- You should specify a gap-width of at least 1em for separating columns of text; but you can suppress that gap for bulleted lists that already include their own start margin.
- Example:
style="{{Column-width|12em}}"generates:
style="-moz-column-width:12em;-webkit-column-width:12em;column-width:12em;"