This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

column-width

Summary

Specifies the width of columns in multi-column elements.

Overview table

Initial value
auto
Applies to
non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited
No
Media
visual
Computed value
the absolute length, zero or larger
Animatable
Yes
CSS Object Model Property
columnWidth
Percentages
N/A

Syntax

  • column-width: auto
  • column-width: length

Values

length
A floating-point number, followed by either an absolute units designator

(cm, mm, in, pt, or pc) or a relative units designator (rem, em, ex, or px), that indicates the optimal width. For more information about the supported length units, see CSS Length Units Reference.

auto
Default. The optimal column width is determined through other property values of the multi-column element, such as columnCount.

Examples

Makes as many columns that are 100px as there is space in the browser.

/*
Makes as many columns that are 100px as there is space in the browser.
*/

#column {
  /* Prefix free example below, use vendor prefixes where needed */
  column-width: 100px;
}

View live example

Notes

Remarks

The actual column width may vary from the value specified due to available space. To ensure that the exact value specified for this property is used, all property values of the multi-column element that pertain to length (such as width, column-width, column-gap, and column-rule-width) must be specified.

Related specifications

CSS Multi-column Layout Module
Candidate Recommendation

See also

Related articles

Multi-Column

Attributions