CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS3 column-width Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

The column-width CSS property specifies the optimal width of the columns in a multi-column element. This is not an absolute value; browser may adjust the width of the column depending on the value of other properties, especially column-count.

The following table summarizes the usages context and the version history of this property.

Default value: auto
Applies to: Non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

column-width: 
length | auto | initial | inherit

The example below shows the column-width property in action.

  • p {
  •     -webkit-column-width: 150px; /* Chrome, Safari, Opera */
  •        -moz-column-width: 150px; /* Firefox */
  •             column-width: 150px; /* Standard syntax */
  • }

Property Values

The following table describes the values of this property.

Value Description
length A length in absolute or relative units that specifies the width of the column.
auto The column width is determined by the other property values of the multi-column element, such as column-Count. This is default value.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element column-width property.

Browser Compatibility

The column-width property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 2+ -moz-
  • Google Chrome 4+ -webkit-
  • Internet Explorer 10+
  • Apple Safari 3.1+ -webkit-
  • Opera 11.1+ -o-, 15+ -webkit-

Further Reading

See tutorial on: CSS3 Multi-column Layouts.

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

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.