8000 csswg-drafts/css-multicol/Overview.html at d52a732c370606ac18e12b28f2ae4b73c65bb678 · w3c/csswg-drafts · GitHub
Skip to content
8000

Overview.html

Latest commit

 

History

History
2825 lines (2096 loc) · 77.8 KB

Overview.html

File metadata and controls

2825 lines (2096 loc) · 77.8 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
<meta charset=utf8>
<title>CSS Multi-column Layout Module</title>
<link href="http://purl.org/dc/terms/" rel=schema.dcterms>
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=dcterms.rights>
<meta content="CSS Multi-column Layout Module" name=dcterms.title>
<meta content=text name=dcterms.type>
<meta content=2013-08-05 name=dcterms.date>
<meta content="Håkon Wium Lie" name=dcterms.creator>
<meta content=W3C name=dcterms.publisher>
<meta content="http://dev.w3.org/csswg/css3-multicol/"
name=dcterms.identifier>
<link href="../default.css" rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
<script defer=defer
src="http://test.csswg.org/harness/annotate.js#css-multicol-1_dev"
type="text/javascript"></script>
<style type="text/css">
.cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 5px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
.cols p { padding: 3px; margin: 0 }
.col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px }
.gap { position: absolute; background: green; width: 5px; bottom: 0px; top: 0px; border: 10px solid yellow; border-top-width: 0; border-bottom-width: 0; }
.rep { position: absolute; top: 45px; background: black; height: 110px; width: 100px; color: white; z-index: 4 }
table.breaks { border-collapse: collapse; margin: 1em 0 }
table.breaks td, table.breaks th { border: thin solid black; padding: 0.1em 0.2em }
div.example:before { width: 9em }
</style>
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1>CSS Multi-column Layout Module</h1>
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 5 August 2013</h2>
<dl>
<dt>This version:
<dd>
<!--<a href="http://www.w3.org/TR/2013/CR-css3-multicol-20130805">http://dev.w3.org/csswg/css3-multicol/</a>-->
<a
href="http://dev.w3.org/csswg/css3-multicol/">http://dev.w3.org/csswg/css3-multicol/</a>
<dt>Latest version:
<dd><a href="http://www.w3.org/TR/css3-multicol">
http://www.w3.org/TR/css3-multicol</a>
<dt>Previous version:
<dd><a
href="http://www.w3.org/TR/2009/CR-css3-multicol-20091217/">http://www.w3.org/TR/2009/CR-css3-multicol-20091217/</a>
<dt>Feedback:
<dd><a
href="mailto:www-style@w3.org?subject=%5Bcss-multicol%5D%20feedback">www-style@w3.org</a>
with subject line “<kbd>[css-multicol] <var>… message topic
…</var></kbd>” (<a
href="http://lists.w3.org/Archives/Public/www-style/"
rel=discussion>archives</a>)
<dt>Editors:
<dd>Håkon Wium Lie, Opera Software, howcome@opera.com
<dt>Test Suite:
<dd><a
href="http://test.csswg.org/suites/css3-multicol/nightly-unstable/">
http://test.csswg.org/suites/css3-multicol/nightly-unstable/</a>
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.ercim.eu/"><abbr
title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a
href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<!--end-copyright-->
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<p>This specification describes multi-column layouts in CSS, a style sheet
language for the web. Using functionality described in the specification,
content can be flowed into multiple columns with a gap and a rule between
them.
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
document</h2>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a
href="mailto:www-style@w3.org?Subject=%5Bcss3-multicol%5D%20PUT%20SUBJECT%20HERE">
www-style@w3.org</a> (see <a
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
discussion of this specification. When sending e-mail, please put the text
“css3-multicol” in the subject, preferably like this:
“[<!---->css3-multicol<!---->] <em>…summary of comment…</em>”
<p>This document was produced by the <a
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
the <a href="http://www.w3.org/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
2004 W3C Patent Policy</a>. W3C maintains a <a
href="http://www.w3.org/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p>
<!--end-status-->
<p>This document has been a Working Draft in the CSS Working Group for
several years. Multi-column layouts are traditionally used in print. On
screen, multi-column layouts have been considered experimental, and
implementation and use experience was deemed necessary in order to
proceed. Several implementations have occurred over the past years, and
this specification incorporates useful feedback from implementors as well
as authors and users.
<p>The specification was updated in April 2011 to correct a contradiction
between the text and the pseudo-algorithm in section 3.4. The
pseudo-algorithm was corrected and also made easier to read. The wording
of a few other sections was improved in places, without changes to the
functionality. In January, 2012, some examples and the description of the
‘<a href="#column-fill"><code class=property>column-fill</code></a>’
property was revised.
<p>This document will remain Candidate Recommendation at least until 12 May
2011. See the <a href="#cr-exit-criteria">CR exit criteria.</a>
<h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
contents</a></h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
<li><a href="#the-multi-column-model"><span class=secno>2. </span>The
multi-column model</a>
<li><a href="#the-number-and-width-of-columns"><span class=secno>3.
</span>The number and width of columns</a>
<ul class=toc>
<li><a href="#cw"><span class=secno>3.1. </span>‘<code
class=property>column-width</code>’</a>
<li><a href="#cc"><span class=secno>3.2. </span>‘<code
class=property>column-count</code>’</a>
<li><a href="#columns"><span class=secno>3.3. </span>‘<code
class=property>columns</code>’</a>
<li><a href="#pseudo-algorithm"><span class=secno>3.4.
</span>Pseudo-algorithm</a>
<li><a href="#stacking-context"><span class=secno>3.5. </span>Stacking
context</a>
</ul>
<li><a href="#column-gaps-and-rules"><span class=secno>4. </span>Column
gaps and rules</a>
<ul class=toc>
<li><a href="#column-gap"><span class=secno>4.1. </span>‘<code
class=property>column-gap</code>’</a>
<li><a href="#crc"><span class=secno>4.2. </span>‘<code
class=property>column-rule-color</code>’</a>
<li><a href="#crs"><span class=secno>4.3. </span>‘<code
class=property>column-rule-style</code>’</a>
<li><a href="#crw"><span class=secno>4.4. </span>‘<code
class=property>column-rule-width</code>’</a>
<li><a href="#column-rule"><span class=secno>4.5. </span>‘<code
class=property>column-rule</code>’</a>
</ul>
<li><a href="#column-breaks"><span class=secno>5. </span>Column breaks</a>
<ul class=toc>
<li><a href="#break-before-break-after-break-inside"><span
class=secno>5.1. </span>‘<code class=property>break-before</code>’,
‘<code class=property>break-after</code>’, ‘<code
class=property>break-inside</code>’</a>
</ul>
<li><a href="#spanning-columns"><span class=secno>6. </span>Spanning
columns</a>
<ul class=toc>
<li><a href="#column-span"><span class=secno>6.1. </span>‘<code
class=property>column-span</code>’</a>
</ul>
<li><a href="#filling-columns"><span class=secno>7. </span>Filling
columns</a>
<ul class=toc>
<li><a href="#cf"><span class=secno>7.1. </span>‘<code
class=property>column-fill</code>’</a>
</ul>
<li><a href="#overflow"><span class=secno>8. </span>Overflow</a>
<ul class=toc>
<li><a href="#overflow-inside-multicol-elements"><span class=secno>8.1.
</span>Overflow inside multicol elements</a>
<li><a href="#pagination-and-overflow-outside-multicol"><span
class=secno>8.2. </span>Pagination and overflow outside multicol
elements</a>
</ul>
<li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
<ul class=toc>
<li><a href="#cr-exit-criteria"><span class=secno>9.1. </span>CR exit
criteria</a>
</ul>
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
<li class=no-num><a href="#references">References</a>
<ul class=toc>
<li class=no-num><a href="#normative-references">Normative
references</a>
<li class=no-num><a href="#other-references">Other references</a>
</ul>
<li class=no-num><a href="#index">Index</a>
<li class=no-num><a href="#property-index">Property index</a>
</ul>
<!--end-toc-->
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
<p>(This section is not normative.)
<p>This module describes multi-column layout in CSS. By using functionality
described in this document, style sheets can declare that the content of
an element is to be laid out in multiple columns.
<p>On the Web, tables have also been used to describe multi-column layouts.
The main benefit of using CSS-based columns is flexibility; content can
flow from one column to another, and the number of columns can vary
depending on the size of the viewport. Removing presentation table markup
from documents allows them to more easily be presented on various output
devices including speech synthesizers and small mobile devices.
<p>Multi-column layouts are easy to describe in CSS. Here is a simple
example:
<div class=example>
<pre>body { column-width: 12em }</pre>
<p>In this example, the <code class=html>body</code> element is set to
have columns at least ‘<code class=css>12em</code>’ wide. The exact
number of columns will depend on the available space.
</div>
<p>The number of columns can also be set explicitly in the style sheet:
<div class=example>
<pre>body { column-count: 2 }</pre>
<p>In this case, the number of columns is fixed and the column widths will
vary depending on the available width.
</div>
<p>The shorthand ‘<a href="#columns0"><code
class=property>columns</code></a>’ property can be used to set either,
or both, properties in one declaration.
<div class=example>
<p>In these examples, the number of columns, the width of columns, and
both the number and width are set, respectively:
<pre>
body { columns: 2 }
body { columns: 12em }
body { columns: 2 12em }
</pre>
<p>However, as described below, setting both the width and number of
columns rarely makes sense.
</div>
<p>Another group of properties introduced in this module describe gaps and
rules between columns.
<div class=example>
<pre>
body {
column-gap: 1em;
column-rule: thin solid black;
}
</pre>
<p>The first declaration in the example above sets the gap between two
adjacent columns to be 1em. Column gaps are similar to padding areas. In
the middle of the gap there will be a rule which is described by the
‘<a href="#column-rule0"><code class=property>column-rule</code></a>’
property.
</div>
<p>The values of the ‘<a href="#column-rule0"><code
class=property>column-rule</code></a>’ property are similar to those of
the CSS border properties. Like ‘<code class=property>border</code>’,
‘<a href="#column-rule0"><code class=property>column-rule</code></a>’
is a shorthand property.
<div class=example>
<p>In this example, the shorthand ‘<a href="#column-rule0"><code
class=property>column-rule</code></a>’ declaration from the above
example has been expanded:
<pre>
body {
column-gap: 1em;
column-rule-width: thin;
column-rule-style: solid;
column-rule-color: black;
}
</pre>
</div>
<p>The ‘<a href="#column-fill"><code
class=property>column-fill</code></a>’ and ‘<a
href="#column-span0"><code class=property>column-span</code></a>’
properties give style sheets a wider range of visual expressions in
multi-column layouts.
<div class=example>
<p>In this example, columns are set to be balanced, i.e., to have
approximately the same length. Also, <code>h2</code> elements are set to
span across all columns.
<pre>
div { column-fill: balance }
h2 { column-span: all }
</pre>
</div>
<p>This specification introduces ten new properties, all of which are used
in the examples above.
<p>To indicate where column breaks should (or should not) appear, new
keyword values are introduced.
<div class=example>
<p>In this example, <code>h1</code> elements will always have a column
break before them, but the formatter will try to avoid column breaks
inside and after the element.
<pre>
h1 {
break-before: column;
break-inside: avoid-column;
break-after: avoid-column;
}
</pre>
<!--<p>The properties and values used in this example are formally defined in [!CSS3PAGE]].--></div>
<p>If all column properties have their initial value, the layout of an
element will be identical to a multi-column layout with only one column.
<h2 id=the-multi-column-model><span class=secno>2. </span>The multi-column
model</h2>
<p>A <dfn id=multi-column-element>multi-column element</dfn> (or
<em>multicol element</em> for short) is an element whose ‘<a
href="#column-width"><code class=property>column-width</code></a>’ or
‘<a href="#column-count"><code class=property>column-count</code></a>’
property is not ‘<code class=css>auto</code>’ and therefore acts as a
container for multi-column layout.
<p>In the traditional CSS box model, the content of an element is flowed
into the content box of the corresponding element. Multi-column layout
introduces a new type of container between the content box and the
content, namely the <dfn id=column-box>column box</dfn> (or
<em>column</em> for short). The content of a multicol element is flowed
into its column boxes.
<p>Column boxes in a multi-column element are arranged into <em>rows</em>.
Like table cells, the column boxes in a row are ordered in the inline
direction of the multicol element. The <em>column width</em> is the length
of the column box in the inline direction. The <em>column height</em> is
the length of the column box in the block direction. All column boxes in a
row have the same column width, and all column boxes in a row have the
same column height. Within each row in the multi-column element, adjacent
column boxes are separated by a <em>column gap</em>, which may contain a
<em>column rule</em>. All column gaps in the same row are equal. All
column rules in the same row are also equal, if they appear; column rules
only appear between columns that both have content.
<p>In the simplest case a multicol element will contain only one row of
columns, and the height of each column will be equivalent to the used
height of the multi-column element's content box. If the multi-column
element is paginated, the height of each row is constrained by the page
and the content continues in a new row of column boxes on the next page; a
column box never splits across pages. The same effect occurs when a <a
href="#spanning-element"><em>spanning element</em></a> divides the
multi-column element: the columns before the spanning element are balanced
and shortened to fit their content. Content after the spanning element
then flows into a new row of column boxes.
<p>It is not possible to set properties/values on column boxes. For
example, the background of a certain column box cannot be set and a column
box has no concept of padding, margin or borders.
<p class=note>Future specifications may add additional functionality. For
example, columns of different widths and different backgrounds may be
supported.
<div class=example>
<p>Column gaps (yellow) and column rules (green) are shown in this sample
rendition of a multi-column element with padding (blue). The blue and
yellow is present for illustrational purposes only. In actual
implementations these areas will be determined by the background.
<div class=cols>
<div class=col style="">
<p> Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs
</div>
<div class=col style="left: 175px">
<p> tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
</div>
<div class=col style="left: 350px">
<p> M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
Pqr stu vw xyz.
</div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>
<p>To illustrate the effects of the various properties described in this
specification, variations on a sample document will be used. Here is the
source code of the sample document:
<pre class=html>
&lt;html>
&lt;style type="text/css">
div {
column-width: 15em;
column-gap: 2em; /* shown in yellow */
column-rule: 4px solid green;
padding: 5px; /* shown in blue */
}
p { margin: 0; padding: 0 }
img { display: none }
&lt;/style>
&lt;body>
&lt;div>
&lt;p&gt;Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
&lt;img src=...>
def g hij
...
&lt;/div>
&lt;/body>
&lt;/html>
</pre>
<p>The nonsensical text in the example is the English alphabet which shows
how text flows from one column to another. To simplify the visualization,
the textual content of the different examples vary slightly.
</div>
<p>Column boxes are block container boxes. That is, column boxes behave
like block-level, table cell, and inline-block boxes as per CSS 2.1,
section 10.1, item 2 <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. However, column boxes do not
establish block container boxes for elements with ‘<code
class=css>position: fixed</code>’ or ‘<code class=css>position:
absolute</code>’.
<div class=example>
<p>In this example, the width of the image is set with these rules:
<pre class=css>
img { display: block; width: 100% }
</pre>
<p>Given that the width is calculated relative to the column box, the
image will be as wide as the column box:
<div class=cols>
<p>Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
<br>
<br>
<br>
<br>
<br>
<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
<div class=col style="left: 175px">
<p>hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
</div>
<div class=col style="left: 350px">
<p> Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz.
</div>
<div class=rep style="width: 150px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>
</div>
<p>Floats that appear inside multi-column layouts are positioned with
regard to the column box where the float appears.
<div class=example>
<p>In this example, this CSS fragment describes the presentation of the
image:
<pre class=css>
img { display: block; float: right }
</pre>
<div class=cols>
<div class=col style="">
<p> Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g<br>
hij klm<br>
nopq<br>
rs tuv<br>
wxy x<br>
yz. Ab <br>
cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc
</div>
<div class=col style="left: 175px">
<p> def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
</div>
<div class=col style="left: 350px">
<p> x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
Ab cde fgh i jkl. Mno<br>
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
M nop qrst uv wx yz.<br>
</div>
<div class=rep style="left: 50px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>
<p>The black box represents the image.
</div>
<p>A multi-column element establishes a new block formatting context, as
per CSS 2.1 section 9.4.1.
<div class=example>
<p>A top margin set on the first child element of a multicol element will
not collapse with the margins of the multicol element.
</div>
<p>Nested multi-column elements are allowed, but there may be
implementation-specific limits.
<h2 id=the-number-and-width-of-columns><span class=secno>3. </span>The
number and width of columns</h2>
<p>Finding the number and width of columns is fundamental when laying out
multi-column content. These properties are used to set the number and
width of columns: <!--When the block direction
is unconstrained and no column breaks are added through style sheets,
these two properties determine the outcome:-->
<ul>
<li>‘<a href="#column-count"><code
class=property>column-count</code></a>’
<li>‘<a href="#column-width"><code
class=property>column-width</code></a>’
</ul>
<p>A third property, ‘<a href="#columns0"><code
class=property>columns</code></a>’, is a shorthand property which sets
both ‘<a href="#column-width"><code
class=property>column-width</code></a>’ and ‘<a
href="#column-count"><code class=property>column-count</code></a>’.
<p>Other factors, such as explicit column breaks, content, and height
constraints, may influence the actual number and width of columns.
<h3 id=cw><span class=secno>3.1. </span>‘<a href="#column-width"><code
class=property>column-width</code></a>’</h3>
<table class=propdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=column-width>column-width</dfn>
<tr>
<td><em>Value:</em>
<td>&lt;length&gt; | auto
<tr>
<td><em>Initial:</em>
<td>auto
<tr>
<td><em>Applies to:</em>
<td>non-replaced block-level elements (except table elements), table
cells, and inline-block elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed value:</em>
<td>the absolute length, zero or larger
<tr>
<td><em>Animatable:</em>
<td>as <a
href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
</table>
<p>This property describes the width of columns in multicol elements.
<dl>
<dt>auto
<dd>means that the column width will be determined by other properties
(e.g., ‘<a href="#column-count"><code
class=property>column-count</code></a>’, if it has a non-auto value).
<dt>&lt;length>
<dd>describes the optimal column width. The actual column width may be
wider (to fill the available space), or narrower (only if the available
space is smaller than the specified column width). Specified values must
be greater than 0.
</dl>
<div class=example>
<p>For example, consider this style sheet:
<pre>
div {
width: 100px;
column-width: 45px;
column-gap: 0;
column-rule: none;
}
</pre>
<p>There is room for two 45px wide columns inside the 100px wide element.
In order to fill the available space the actual column width will be
increased to 50px.
</div>
<div class=example>
<p>Also, consider this style sheet:
<pre>
div {
width: 40px;
column-width: 45px;
column-gap: 0;
column-rule: none;
}
</pre>
<p>The available space is smaller than the specified column width and the
actual column width will therefore be decreased.
</div>
<p>To ensure that ‘<a href="#column-width"><code
class=property>column-width</code></a>’ can be used with vertical text,
column width means the length of the line boxes inside the columns.
<p class=note>The reason for making ‘<a href="#column-width"><code
class=property>column-width</code></a>’ somewhat flexible is to achieve
scalable designs that can fit many screen sizes. To set an exact column
width, all length values (in horizontal text these are: ‘<code
class=property>width</code>’, ‘<a href="#column-width"><code
class=property>column-width</code></a>’, ‘<a href="#column-gap0"><code
class=property>column-gap</code></a>’, and ‘<a
href="#column-rule-width"><code
class=property>column-rule-width</code></a>’) must be specified.
<h3 id=cc><span class=secno>3.2. </span>‘<a href="#column-count"><code
class=property>column-count</code></a>’</h3>
<table class=propdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=column-count>column-count</dfn>
<tr>
<td><em>Value:</em>
<td>&lt;integer&gt; | auto
<tr>
<td><em>Initial:</em>
<td>auto
<tr>
<td><em>Applies to:</em>
<td>non-replaced block-level elements (except table elements), table
cells, and inline-block elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed value:</em>
<td>specified value
<tr>
<td><em>Animatable:</em>
<td>as <a
href="http://dev.w3.org/csswg/css3-transitions/#animtype-integer">integer</a>
</table>
<p>This property describes the number of columns of a multicol element.
<dl>
<dt>auto
<dd>means that the number of columns will be determined by other
properties (e.g., ‘<a href="#column-width"><code
class=property>column-width</code></a>’, if it has a non-auto value).
<dt>&lt;integer>
<dd>describes the optimal number of columns into which the content of the
element will be flowed. Values must be greater than 0. If both ‘<a
href="#column-width"><code class=property>column-width</code></a>’ and
‘<a href="#column-count"><code
class=property>column-count</code></a>’ have non-auto values, the
integer value describes the maximum number of columns.
</dl>
<div class=example>
<p>Example:
<pre>body { column-count: 3 }</pre>
</div>
<h3 id=columns><span class=secno>3.3. </span>‘<a href="#columns0"><code
class=property>columns</code></a>’</h3>
<table class=propdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=columns0>columns</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#cw">&lt;‘<code
class=property>column-width</code>’></a> || <a
href="#cc">&lt;‘<code class=property>column-count</code>’></a>
<tr>
<td><em>Initial:</em>
<td>see individual properties
<tr>
<td><em>Applies to:</em>
<td>non-replaced block-level elements (except table elements), table
cells, and inline-block elements
<tr>
<td><em>Inherited:</em>
<td>no
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual
<tr>
<td><em>Computed value:</em>
<td>see individual properties
<tr>
<td><em>Animatable:</em>
<td>see individual properties
</table>
<p>This is a shorthand property for setting ‘<a
href="#column-width"><code class=property>column-width</code></a>’ and
‘<a href="#column-count"><code
class=property>column-count</code></a>’. Omitted values are set to their
initial values.
<div class=example>
<p>Here are some valid declarations using the ‘<a href="#columns0"><code
class=property>columns</code></a>’ property:
<pre>
columns: 12em; /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2; /* column-width: auto; column-count: 2 */
columns: 2 auto; /* column-width: auto; column-count: 2 */
columns: auto; /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */
</pre>
</div>
<h3 id=pseudo-algorithm><span class=secno>3.4. </span>Pseudo-algorithm</h3>
<p>The pseudo-algorithm below determines the used values for ‘<a
href="#column-count"><code class=property>column-count</code></a>’ (N)
and ‘<a href="#column-width"><code
class=property>column-width</code></a>’ (W). There is one other variable
in the pseudo-algorithm: U is the used width of the multi-column element.
<p class=note>The used width U of the multi-column element can depend on
the element's contents, in which case it also depends on the computed
values of the ‘<a href="#column-count"><code
class=property>column-count</code></a>’ and ‘<a
href="#column-width"><code class=property>column-width</code></a>’
properties. This specification does not define how U is calculated.
Another module (probably the Basic Box Model <a href="#CSS3BOX"
rel=biblioentry>[CSS3BOX]<!--{{CSS3BOX}}--></a> or the Intrinsic &
Extrinsic Sizing Module <a href="#CSS3-SIZING"
rel=biblioentry>[CSS3-SIZING]<!--{{CSS3-SIZING}}--></a>) is expected to
define this. <!--
<p>Two assumptions are being made by the pseudo-algorithm:
<ul>
<li>that the block direction is unconstrained
<li>that no column breaks are added through style sheets
</ul>
-->
<p>The <code>floor(X)</code> function returns the largest integer Y ≤ X.
<pre>
(01) if column-width = auto then
(02) N := column-count
(03) else if column-count = auto then
(04) N := max(1,
(05) floor((U + column-gap)/(column-width + column-gap)))
(06) else
(07) N := min(column-count, max(1,
View remainder of file in raw view