English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Reference Manual

CSS @rules (RULES)

Comprehensive List of CSS Properties

CSS3 column-Usage and Example of width Attribute

column-The width CSS attribute specifies the optimal width of the column in the multi-column element. This is not an absolute value, and the browser can adjust the width of the column based on the values of other attributes, especiallycolumn-count.

The table below provides the usage instructions and version history of this attribute, as well as the usage syntax of this attribute in the JavaScript script.

Default Value:auto
Applies To:UnreplacedBlockBlock-level Element (except for table elements), table cell andInline BlockElement
Inheritance:No
Animatable:Yes.Please refer to Animation Attributes.
Version: CSS3new feature
JavaScript Syntax:object.style.columnWidth="100px"

column-The syntax of width

The syntax of this attribute is as follows:

column-width: length | auto | initial | inherit

The following examples demonstrate how to use column-width attribute.

p {
    -webkit-column-width: 150px; /* Chrome, Safari, Opera */
       -moz-column-width: 150px; /* Firefox */
            column-width: 150px; 
}
Test See‹/›

Attribute Value

The table below describes the value of this attribute.

ValueDescription
length

Length represented by absolute or relative units, used to specify the width of the column.

autoThe width of the column is determined by other attribute values of the multi-column elements, such as column-Count. This is the default value.
initialSet this attribute to its default value.
inheritIf specified, the associated element adopts its parent element column-The value of width attribute.

Browser Compatibility

column-Browser Compatibility of width Attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

  • Firefox 2+ -moz-

  • Google Chrome 4+ -webkit-

  • Internet Explorer 10+

  • Apple Safari 3.1+ -webkit-

  • Opera 11.1+ -o-,15+ -webkit-

Further Reading

Please refer to the following tutorials:CSS3Multi-column Layout.

Related Attributes:column-span,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-count,columns.