spec:css-align-3;

type:property; text:column-gap

type:value; for:column-gap; text:normal

spec:css-backgrounds-3;

type:property; text:border

type:type;

text:<line-style>

text:<line-width>

type:value; for:border-style; text:none

spec:css-break-4; type:dfn; text:fragment

spec:css-display-3; type:property; text:display

spec:css-sizing-3; type:property; text:min-height

.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 }

(This section is not normative.)

This module describes <dfn export>multi-column layout</dfn> 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.

Other layout methods in CSS,

when applied to a parent element,

change the display properties of the direct children.

For example if a three column grid layout is created,

the direct children of the [=grid container=] become [=grid items=]

and are placed into the column tracks,

one element per cell with additional rows created as needed.

The child elements of a [=multi-column container=] however continue in normal flow,

that flow is arranged into a number of columns.

These columns have a flexible inline size,

and therefore respond to available space

by changing the size or number of columns displayed.

Multi-column layouts are easy to describe in CSS.

Here is a simple example:

<div class=example>

<pre highlight="css">body { column-width: 12em }</pre>

In this example, the <code class=html>body</code> element is

set to have columns at least ''12em'' wide. The exact number of

columns will depend on the available space.

</div>

The number of columns can also be set explicitly in the style sheet:

<div class=example>

<pre highlight="css">body { column-count: 2 }</pre>

In this case, the number of columns is fixed

and the column widths will vary depending on the available width.

</div>

The shorthand 'columns' property can be used to set either,

or both, properties in one declaration.

<div class=example>

In these examples, the number of columns, the width of columns, and

both the number and width are set, respectively:

<pre highlight="css">

body { columns: 2 }

body { columns: 12em }

body { columns: 2 12em }

</pre>

</div>

Another group of properties introduced in this module describe

gaps and rules between columns.

<div class=example>

<pre highlight="css">

body {

column-gap: 1em;

column-rule: thin solid black;

}

</pre>

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 'column-rule' property.

</div>

The values of the 'column-rule' property are similar to those of the CSS 'border' properties.

Like 'border', 'column-rule' is a shorthand property.

<div class=example>

In this example, the shorthand 'column-rule' declaration from the

above example has been expanded:

<pre highlight="css">

body {

column-gap: 1em;

column-rule-width: thin;

column-rule-style: solid;

column-rule-color: black;

}

</pre>

</div>

The 'column-fill' and 'column-span' properties

give style sheets a wider range of visual expressions in multi-column layouts.

<div class=example>

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 highlight="css">

div { column-fill: balance }

h2 { column-span: all }

</pre>

</div>

<wpt>

multicol-fill-balance-029.html

</wpt>

This specification introduces ten new properties,

all of which are used in the examples above.

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.

<div class="example">

<a>Column gaps</a> (diagonal hatching) and <a>column rules</a>

are shown in this sample rendition of a multi-column container

with padding (cross hatching).

The hatched areas are present for illustrational purposes only.

In actual implementations these areas will be determined by the background,

the second image shows a rendering of a [=multi-column container=] with column-rules.

<figure>

<img alt="a diagram showing the various parts of multi-column layout" src="images/initial-example.svg" no-autosize>

<img alt="key to the conventions used to display invisible parts of diagram" src="images/invisible-elements.svg" no-autosize>

<figcaption>A multi-column layout with the non-visible column-span and padding inside the multicol container highlighted.</figcaption>

</figure>

<figure>

<img alt="a diagram showing the various parts of multi-column layout" src="images/initial-example-b.svg" no-autosize>

<figcaption>The same layout as in the first image, as it would be displayed by an implementation.</figcaption>

</figure>

</div>

This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]

using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].

Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].

Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions,

all properties defined in this specification

also accept the <a>CSS-wide keywords</a> as their property value.

For readability they have not been repeated explicitly.

An element whose 'column-width' or 'column-count' property is not ''column-width/auto''

establishes a <dfn lt="multi-column container|multicol container" oldids="multi-column-element" export>multi-column container</dfn>

(or <i>multicol container</i> for short),

and therefore acts as a container for [=multi-column layout=].

<wpt title="Basic multicol tests.">

multicol-basic-002.html

multicol-basic-004.html

</wpt>

<wpt title="Tests demonstrating that auto values do not create a multicol container.">

multicol-count-computed-004.xht

</wpt>

<wpt title="Multicol properties do not inherit.">

inheritance.html

</wpt>

<wpt title="Multicol with scrolled columns.">

multicol-scroll-content.html

</wpt>

<wpt title="Multicol with zero height.">

multicol-zero-height-001.xht

multicol-zero-height-002.html

multicol-zero-height-003.html

</wpt>

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 [=fragmentation context=]

formed of <a lt="anonymous box">anonymous</a> [=fragmentation containers=]

called <dfn export lt="column box" local-lt=column>column boxes</dfn>

(or <i>columns</i> for short).

These [=column boxes=] establish

an independent [=block formatting context=]

into which the multi-column container's content flows,

and form the [=containing block=] for its non-positioned children.

<div class=example>

In this example, the width of the image is set with these rules:

<pre highlight="css">

img {

display: block;

width: 100%;

}

</pre>

Given that the column box creates a new [=block formatting context=],

the 'width' is calculated relative to the column box.

Therefore the image will not overflow the column box:

<figure>

<img src="images/image-inside-column.svg" alt="an image contained inside a column box" no-autosize>

<figcaption>The image is constrained by the column box that it is displayed in.</figcaption>

</figure>

</div>

<div class="example">

Given that the column box creates a new [=block formatting context=], a top margin set on the first child element of a multicol container will not collapse with the margins of the multicol container.

<figure>

<img src="images/margins-do-not-collapse.svg" alt="The first paragraph has a 'margin-top' of ''1em'', which appears before the text." no-autosize>

<figcaption>The margin above the first paragraph has not collapsed, leaving a ''1em'' margin above the first line in the multicol container.</figcaption>

</figure>

</div>

<wpt>

multicol-margin-001.xht

multicol-margin-002.xht

multicol-margin-003.html

multicol-margin-child-001.xht

multicol-nested-margin-001.xht

multicol-nested-margin-002.xht

multicol-nested-margin-003.xht

multicol-nested-margin-004.xht

multicol-nested-margin-005.xht

multicol-collapsing-001.xht

</wpt>

Floats that appear inside multi-column layouts are positioned with

regard to the [=column box=] where the float appears.

<div class="example">

In this example, this CSS fragment describes the presentation of the image:

<pre highlight="css">

img {

display: block;

float: right;

}

</pre>

In the HTML, the image appears after the sentence ending, "the leg of a chicken".

<figure>

<img src="images/image-floated-in-column.svg" alt="an image floated and contained inside a column box" no-autosize>

<figcaption>The image is floated inside the column box it appears in.</figcaption>

</figure>

</div>

Content overflowing a [=column box=] in the [=block axis=]

[=fragments=] and continues in the next [=column box=].

Note: Column boxes, which are [=anonymous boxes=],

do not become the [=containing block=]

for [=absolutely positioned boxes=].

The 'position' property, which establishes a containing block for such boxes,

applies to the [=multicol container=], it being the [=principal box=].

<wpt>

multicol-containing-001.xht

multicol-containing-002.xht

multicol-containing-003.html

multicol-contained-absolute.html

abspos-autopos-contained-by-viewport-000.html

abspos-autopos-contained-by-viewport-001.html

abspos-multicol-in-second-outer-clipped.html

</wpt>

<div class="example">

In this example, the [=multi-column container=] has ''position: relative''

thus becoming the containing block.

The image is a direct child of the [=multi-column container=]

and has ''position: absolute''.

It takes positioning from the [=multi-column container=]

and not from the [=column box=].

<pre highlight="css">

.container {

position: relative;

column-count: 3;

}

img {

position: absolute;

top: 20px;

left: 40px;

}

</pre>

<figure>

<img src="images/column-not-containing-block.svg" alt="The absolutely positioned image is positioned by reference to the [=multi-column container=] not the [=column box=]." no-autosize>

<figcaption>The figure demonstrates that the absolutely positioned image is positioned by reference to the multicol container and not the column box.</figcaption>

</figure>

</div>

[=Out-of-flow=] descendants of a [=multi-column container=] do affect column balancing,

and the block-size of the [=multi-column container=].

<wpt>

multicol-oof-inline-cb-001.html

multicol-oof-inline-cb-002.html

</wpt>

The column boxes are ordered

in the [=inline base direction=] of the multicol container

and arranged into <dfn lt="multi-column line | multi-col line | multicol line">multicol lines</dfn>.

The <dfn export>column width</dfn> is the length of the column box in the inline direction.

The <dfn export>column height</dfn> is the length of the column box in the block direction.

All column boxes in a line have the same column width,

and all column boxes in a line have the same column height.

<wpt title="The following tests relate to baseline alignment of the content of columns,

baseline-000.html

baseline-001.html

baseline-002.html

baseline-003.html

baseline-004.html

baseline-005.html

baseline-006.html

baseline-007.html

baseline-008.html

crashtests/as-baseline-aligned-grid-item.html

</wpt>

<wpt title="The following tests check the behavior of list items that are also muticol containers.">

multicol-list-item-001.xht

multicol-list-item-002.html

multicol-list-item-003.html

multicol-list-item-004.html

multicol-list-item-005.html

multicol-list-item-006.html

multicol-list-item-007.html

multicol-list-item-008.html

</wpt>

<wpt title="Testing grid items inside multicol">

balance-grid-001.html

</wpt>

<wpt title="The following tests check the behavior of table elements.">

table/multicol-table-cell-001.xht

table/multicol-table-cell-height-001.xht

table/multicol-table-cell-height-002.xht

table/multicol-table-cell-vertical-align-001.xht

table/table-cell-as-multicol.html

table/table-cell-content-change-000.html

table/table-cell-content-change-001.html

table/table-cell-multicol-nested-001.html

table/table-cell-multicol-nested-002.html

table/table-cell-multicol-nested-003.html

crashtests/break-before-multicol-caption.html

crashtests/repeated-table-column.html

crashtests/table-cell-writing-mode-root.html

table/balance-breakafter-before-table-section-crash.html

table/balance-table-with-border-spacing.html

table/balance-table-with-fractional-height-row.html

</wpt>

<wpt title="The following tests check that paint order is correct.">

float-and-block.html

move-with-text-after-paint.html

resize-with-text-after-paint.html

</wpt>

<wpt title="The following tests relate to animation or transformation of multicol properties.">

animation/column-width-interpolation.html

animation/discrete-no-interpolation.html

multicol-overflow-positioned-transform-001.html

multicol-overflow-transform-001.html

resize-multicol-with-fixed-size-children.html

resize-multicol-with-fixed-size-children-002.html

resize-multicol-with-fixed-size-children-003.html

resize-in-strict-containment-nested.html

remove-child-in-strict-containment-also-spanner.html

composited-under-clip-under-multicol.html

change-intrinsic-width.html

change-fragmentainer-size-000.html

change-fragmentainer-size-001.html

change-fragmentainer-size-002.html

change-fragmentainer-size-003.html

hit-test-child-under-perspective.html

hit-test-transformed-child.html

</wpt>

<wpt title="Tests related to implementation bugs, not linked to specific normative text.">

crashtests/multicol-with-monolithic-oof-with-multicol-with-oof.html

crashtests/chrome-bug-1293905.html

crashtests/chrome-bug-1297118.html

crashtests/chrome-bug-1301281.html

crashtests/chrome-bug-1303256.html

crashtests/chrome-bug-1314866.html

crashtests/dynamic-simplified-layout-break-propagation.html

crashtests/float-multicol-crash.html

change-abspos-width-in-second-column-crash.html

change-out-of-flow-type-and-remove-inner-multicol-crash.html

crashtests/monolithic-oof-in-clipped-container.html

crashtests/move-linebreak-to-different-column.html

crashtests/move-newline-pre-text.html

crashtests/multicol-at-page-boundary-print.html

crashtests/multicol-block-in-inline-crash.html

crashtests/multicol-cached-consumed-bsize-crash.html

crashtests/multicol-column-change-crash.html

crashtests/multicol-dynamic-contain-crash.html

crashtests/multicol-dynamic-transform-crash.html

crashtests/multicol-floats-in-ifc.html

crashtests/multicol-parallel-flow-after-spanner-in-inline.html

crashtests/outline-move-oof-with-inline.html

crashtests/relpos-inline-with-abspos-multicol-gets-block-child.html

crashtests/size-containment-become-multicol-add-inline-child.html

crashtests/sticky-in-abs-in-sticky.html

crashtests/text-box-trim-end-and-widows.html

crashtests/vertical-rl-column-rules-wide-columns.html

crashtests/video-container-become-multicol.html

dynamic-become-multicol-add-oof-inside-inline-crash.html

extremely-tall-multicol-with-extremely-tall-child-crash.html

file-control-crash.html

img-alt-as-multicol-crash.html

multicol-loads-indefinitely-001-crash.html

multicol-on-broken-image-alt-text.html

overflow-scroll-in-multicol-crash.html

remove-block-sibling-of-inline-with-block-crash.html

subpixel-column-progression.html

subpixel-scroll-crash.html

text-child-crash.html

with-custom-layout-on-same-element-crash.https.html

crashtests/oof-in-area-001.html

crashtests/oof-in-area-002.html

crashtests/oof-in-area-003.html

crashtests/oof-in-oof-multicol-in-multicol-spanner-in-multicol.html

crashtests/oof-in-oof-multicol-in-relpos-in-oof-in-multicol-in-multicol.html

crashtests/oof-in-oof-multicol-in-relpos-spanner-in-multicol-in-relpos-multicol-in-multicol.html

crashtests/oof-in-oof-multicol-in-relpos-spanner-in-spanner-multicol-in-multicol-in-multicol.html

crashtests/oof-in-oof-multicol-in-spanner-in-multicol-in-spanner-in-nested-multicol.html

crashtests/oof-in-oof-multicol-in-spanner-in-nested-multicol.html

crashtests/oof-in-relpos-in-oof-multicol-in-oof-in-relpos-in-oof-multicol-in-multicol.html

crashtests/oof-in-relpos-in-oof-multicol-in-relpos-in-oof-multicol-in-relpos-multicol.html

crashtests/floated-input-in-inline-next-column.html

crashtests/inline-float-parallel-flow.html

crashtests/table-caption-in-clipped-overflow.html

crashtests/text-in-inline-interrupted-by-float.html

increase-prev-sibling-height.html

crashtests/interleaved-bfc-crash.html

crashtests/relayout-fixedpos-in-abspos-in-relpos-in-nested-multicol.html

crashtests/inline-become-oof-container-make-oof-inflow.html

multicol-dynamic-change-inside-break-inside-avoid-001.html

multicol-dynamic-add-001.html

multicol-dynamic-add-002.html

multicol-dynamic-add-003.html

multicol-dynamic-add-004.html

scroll-width-height.tentative.html

filter-with-abspos.html

crashtests/add-list-item-marker.html

crashtests/block-in-inline-with-abspos-after-spanner.html

crashtests/block-in-inline-with-spanner-in-overflowed-parent.html

crashtests/block-in-inline-with-spanner-in-overflowed-parent-nested-multicol.html

crashtests/first-letter-column-span-fieldset.html

crashtests/triply-nested-partial-relayout.html

</wpt>

<wpt title="Tests related to printing and paged media as related to multicol.">

auto-fill-auto-size-001-print.html

auto-fill-auto-size-002-print.html

multicol-height-002-print.xht

named-page.html

page-property-ignored.html

</wpt>

Note: In text set using a vertical writing mode,

the block direction runs horizontally.

In a vertical writing mode columns are laid out horizontally,

and the direction of the flow of blocks may be right to left, or left to right.

The 'column-width' property therefore refers to the inline size of the column,

and not the physical horizontal width.

<div class="example">

<figure>

<img alt="The first image shows horizontal text with a LTR inline direction. The second shows vertical text with blocks flowing right to left. The third shows vertical text with blocks flowing left to right." src="images/writing-modes.svg" no-autosize>

<figcaption>A diagram showing the different ways columns may be arranged due to writing mode.

<br>From left to right: horizontal-tb, vertical-rl, vertical-lr.</figcaption>

</figure>

</div>

<wpt title="Tests regarding vertical writing modes.">

orthogonal-writing-mode-shrink-to-fit.html

multicol-under-vertical-rl-scroll.html

hit-test-in-vertical-rl.html

</wpt>

Within each [=multicol line=] in the multi-column container,

adjacent column boxes are separated by a <dfn noexport>column gap</dfn>,

which may contain a <dfn noexport>column rule</dfn>.

All column gaps in the same multi-column container are equal.

All column rules in the same multi-column container are also equal, if they appear;

column rules only appear between columns that both have content.

In the simplest case a multicol container will contain only one line

of columns, and the height of each column will be equivalent to the

used height of the multi-column container's content box.

However, [=fragmentation=] or [=spanners=]

can split the content of the [=multi-column container=]

into multiple [=multicol lines=].

If the multi-column container is paginated, the height of each column is

constrained by the page and the content continues in a new line of

column boxes on the next page; a column box never splits across pages.

The same effect occurs when a <i>spanning element</i> divides the

multi-column container: the columns before the spanning element are

balanced and shortened to fit their content. Content after the

spanning element then flows into a new, subsequent line of column boxes.

<div class="example">

<figure>

<img alt="a diagram showing a spanning element causing the shortened columns above the element with text continuing in new columns below" src="images/simple-span-example.svg" no-autosize>

<figcaption>A demonstration of how the spanning element divides the multicol container.</figcaption>

</figure>

</div>

A [=multi-column container=] therefore is a regular [=block container=]

that establishes a new [=independent formatting context=]

whose contents consist of a series of

[=multicol lines=] and multicol spanners.

Each [=multi-column line=] acts as a [=block-level box=]

that establishes a <dfn>multi-column formatting context</dfn>

for its [=column boxes=];

and each [=spanner=] acts as a [=block-level box=]

that establishes an [=independent formatting context=]

with its type depending on its 'display' value as usual.

Nested multi-column containers are allowed,

but there may be implementation-specific limits.

<wpt>

multicol-nested-002.xht

multicol-nested-005.xht

multicol-nested-006.html

multicol-nested-007.html

multicol-nested-008.html

multicol-nested-009.html

multicol-nested-010.html

multicol-nested-011.html

multicol-nested-012.html

multicol-nested-013.html

multicol-nested-014.html

multicol-nested-015.html

multicol-nested-016.html

multicol-nested-017.html

multicol-nested-018.html

multicol-nested-019.html

multicol-nested-020.html

multicol-nested-021.html

multicol-nested-022.html

multicol-nested-023.html

multicol-nested-024.html

multicol-nested-025.html

multicol-nested-026.html

multicol-nested-027.html

multicol-nested-028.html

multicol-nested-029.html

multicol-nested-030.html

multicol-nested-031.html

multicol-nested-032.html

multicol-nested-033.html

crashtests/nested-as-balanced-legend.html

crashtests/nested-as-nested-balanced-legend.html

crashtests/nested-floated-multicol-with-tall-margin.html

crashtests/nested-multicol-and-float-with-tall-padding-before-float.html

crashtests/nested-multicol-and-float-with-tall-padding.html

crashtests/nested-multicol-fieldset-tall-trailing-border-freeze.html

crashtests/nested-multicol-fieldset-tall-trailing-padding.html

crashtests/nested-multicol-in-svg-foreignobject.html

crashtests/nested-multicol-nested-flex.html

crashtests/nested-multicol-with-float-between.html

crashtests/nested-oof-multicol-with-monolithic-child.html

crashtests/nested-oof-multicol-with-oof-needing-additional-columns.html

crashtests/nested-oof-multicol-with-padding.html

crashtests/nested-with-fragmented-oof-negative-top-offset.html

crashtests/nested-with-multicol-table-caption.html

crashtests/multicol-table-caption-parallel-flow-after-spanner-in-inline.html

crashtests/nested-with-multicol-table-cell.html

crashtests/nested-with-oof-inside-fixed-width.html

crashtests/nested-with-percentage-size-and-oof.html

crashtests/nested-with-tall-padding-and-oof.html

crashtests/nested-with-tall-padding.html

crashtests/oof-in-nested-line-float.html

crashtests/oof-nested-multicol-inside-oof.html

crashtests/relayout-nested-with-oof.html

crashtests/repeated-section-in-nested-table-nested-multicol.html

crashtests/repeated-table-footer-in-caption-nested-multicol.html

nested-balanced-monolithic-multicol-crash.html

nested-balanced-very-tall-content-crash.html

nested-floated-shape-outside-multicol-with-monolithic-child-crash.html

nested-with-overflowing-padding-crash.html

triply-nested-with-fixedpos-in-abspos-crash.html

fixed-in-nested-multicol-with-transform-container.html

fixed-in-nested-multicol-with-viewport-container.html

fixed-in-nested-multicol.html

nested-after-float-clearance.html

nested-at-outer-boundary-as-fieldset.html

nested-at-outer-boundary-as-float.html

nested-at-outer-boundary-as-legend.html

nested-floated-multicol-with-monolithic-child.html

nested-oofs-in-relative-multicol.html

nested-past-fragmentation-line.html

nested-with-too-tall-line.html

oof-nested-in-single-column.html

nested-non-auto-inline-size-offset-top.html

fixedpos-static-pos-with-viewport-cb-001.html

fixedpos-static-pos-with-viewport-cb-002.html

fixedpos-static-pos-with-viewport-cb-003.html

multicol-height-block-child-001.xht

</wpt>

Note: 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.

Future specifications may add additional functionality.

For example, columns of different widths and different backgrounds may be supported.

Note: Multicol containers with column heights larger than the viewport may pose accessibility issues.

See <a href="#a11y">Accessibility Considerations</a> for more details.

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:

<ul>

<li>'column-count'</li>

<li>'column-width'</li>

</ul>

A third property, 'columns',

is a shorthand property which sets both 'column-width' and 'column-count'.

Other factors, such as explicit column breaks, content, and height constraints,

may influence the actual number and width of columns.

<pre class=propdef>

This property describes the width of columns in multicol containers.

<dl dfn-type=value dfn-for=column-width>

<dt><dfn>auto</dfn></dt>

<dd>

means that the column width will be determined by other properties

(e.g., 'column-count', if it has a non-auto value).

<dt><dfn><<length [0,∞]>></dfn>

<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).

Negative values are not allowed.

Used values will be clamped to a minimum of ''1px''.

<wpt>

zero-column-width-computed-style.html

zero-column-width-layout.html

</wpt>

</dd>

</dl>

<wpt>

multicol-basic-003.html

multicol-basic-008.xht

multicol-reduce-000.xht

multicol-width-001.xht

multicol-width-002.xht

multicol-width-003.xht

multicol-width-005.html

multicol-width-ch-001.html

multicol-width-negative-001.xht

multicol-width-invalid-001.xht

multicol-width-large-001.xht

multicol-width-large-002.xht

multicol-inherit-003.xht

parsing/column-width-computed.html

parsing/column-width-invalid.html

parsing/column-width-valid.html

multicol-width-small-001.xht

</wpt>

<div class="example">

For example, consider this style sheet:

<pre highlight="css">

div {

width: 100px;

column-width: 45px;

column-gap: 0;

column-rule: none;

}

</pre>

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">

Also, consider this style sheet:

<pre highlight="css">

div {

width: 40px;

column-width: 45px;

column-gap: 0;

column-rule: none;

}

</pre>

The available space is smaller than the specified column width

and the actual column width will therefore be decreased.

</div>

To ensure that 'column-width' can be used with vertical text,

column width means the length of the line boxes inside the columns.

Note: The reason for making 'column-width' somewhat flexible

is to achieve scalable designs that can fit many screen sizes.

To set an exact column width,

the column gap and the width of the multicol container (assuming horizontal text)

must also be specified.

<pre class=propdef>

This property describes the number of columns of a [=multicol container=].

<dl dfn-type=value dfn-for=column-count>

<dt><dfn>auto</dfn>

<dd>

means that the number of columns will be determined by other properties

(e.g., 'column-width', if it has a non-auto value).

<dt><dfn><<integer [1,∞]>></dfn>

<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 'column-width' and 'column-count' have non-auto values,

the integer value describes the maximum number of columns.

</dd>

</dl>

<wpt>

multicol-count-001.xht

multicol-count-002.xht

multicol-basic-006.xht

multicol-width-count-001.xht

multicol-width-count-002.xht

multicol-columns-toolong-001.xht

multicol-count-negative-001.xht

multicol-count-negative-002.xht

multicol-count-non-integer-001.xht

multicol-count-non-integer-002.xht

multicol-count-non-integer-003.xht

multicol-inherit-001.xht

multicol-inherit-002.xht

parsing/column-count-invalid.html

parsing/column-count-valid.html

parsing/column-count-computed.html

animation/column-count-interpolation.html

large-actual-column-count.html

with-custom-layout-on-same-element.https.html

</wpt>

<div class="example">

Example:

<pre highlight="css">body { column-count: 3 }</pre>

</div>

<pre class="propdef shorthand">

This is a shorthand property for setting 'column-width' and 'column-count'.

Omitted values are set to their initial values.

<div class="example">

Here are some valid declarations using the 'columns' property:

<pre highlight="css">

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>

<wpt>

animation/columns-interpolation.html

multicol-columns-001.xht

multicol-columns-002.xht

multicol-columns-003.xht

multicol-columns-004.xht

multicol-columns-005.xht

multicol-columns-006.xht

multicol-columns-007.xht

multicol-columns-invalid-001.xht

multicol-columns-invalid-002.xht

multicol-basic-001.html

multicol-basic-003.html

multicol-basic-005.xht

multicol-basic-007.xht

parsing/columns-computed.html

parsing/columns-invalid.html

parsing/columns-valid.html

</wpt>

The pseudo-algorithm below determines the used values for

'column-count' (N) and 'column-width' (W). There is one other variable

in the pseudo-algorithm: U is the used width of the multi-column container.

Note: The used width U of the multi-column container can depend on the element's contents,

in which case it also depends on the computed values of the 'column-count' and 'column-width' properties.

This specification does not define how U is calculated.

Another module (probably the Basic Box Model [[CSS3BOX]]

or the Box Sizing Module [[CSS3-SIZING]]) is expected to define this.

intrinsic-size-001.html

intrinsic-size-002.html

intrinsic-size-003.html

intrinsic-size-004.html

intrinsic-size-005.html

as-column-flex-item.html

intrinsic-width-change-column-count.html

<!--

Two assumptions are being made by the pseudo-algorithm:

<li>that the block direction is unconstrained

<li>that no column breaks are added through style sheets

-->

The <code>floor(X)</code> function returns the largest integer Y &le; X.

<pre>

(01) if ((column-width = auto) and (column-count = auto)) then

(02) exit; /* not a multicol container */

(03) if column-width = auto then

(04) N := column-count

(05) else if column-count = auto then

(06) N := max(1,

(07) floor((U + column-gap)/(column-width + column-gap)))

(08) else

(09) N := min(column-count, max(1,

(10) floor((U + column-gap)/(column-width + column-gap))))

</pre>

And:

<pre>

(11) W := max(0, (U + column-gap)/N - column-gap)

</pre>

For the purpose of finding the number of auto-repeated columns,

the UA must floor the column size to a UA-specified value to avoid division by zero.

It is suggested that this floor be 1px or less.

In fragmented contexts such as in [=paged media=],

user agents may perform this calculation on a per-fragment basis.

The used value for 'column-count' is calculated without regard for explicit column breaks or constrained column heights,

while the actual value takes these into consideration.

<wpt>

column-count-used-001.html

</wpt>

<div class="example">

In this example, the actual column-count is higher than the used column-count

due to explicit column breaks:

<pre highlight="css">

div {

width: 40em;

columns: 20em;

column-gap: 0;

}

p {

break-after: column;

}

</pre>

<pre highlight="html">

&lt;div>