column-width

Jump to: navigation, search

column-width

This article is Almost Ready.


W3C Candidate Recommendation

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

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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
prefix
1.5
prefix
10
Yes
11.1
Yes
3.0
prefix
Intrinsic sizes
?
none
?
none
?
none
?
none
?
none

Mobile

FeaturesAndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
Basic support
?
Unknown
?
Yes
?
Unknown
?
Unknown
?
Unknown
Intrinsic sizes
?
none
?
none
?
none
?
none
?
none


Examples

View live exampleMakes as many columns that are 100px as there is space in the browser.

CSS

/*
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;
}

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

Specification Status Related Changes
CSS Multi-column Layout Module Candidate Recommendation

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Chrome Requires -webkit- prefix
Safari Requires -webkit- prefix
Opera 14–Current Requires -webkit- prefix
Firefox Requires -moz- prefix
IE 10

See also

Related articles

Multi-Column












  • column-width


Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]