CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS content attribute CSS3 column-width Attribute

CSS3 Usage and Examples of columns Attribute

The columns CSS attribute is a shorthand attribute used to setcolumn-widthAndcolumn-countAttribute.

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

Default Value:	auto auto; View All Properties
Applies to:	UnreplacedBlockElement (except table elements), table cell andInline BlockElement
Inheritance:	None
Animatable:	Yes, because each property of the shorthand is animatable.Please refer to Animation Attributes.
Version:	CSS3new feature
JavaScript Syntax:	object.style.columns="100px 3"

Syntax of the columns attribute

The syntax of this attribute is as follows:

columns: [ column-width column-count ] | initial | inherit

The following examples demonstrate how to use the columns attribute.

Example

p {
　　　　-webkit-columns:　150px　3;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-columns:　150px　3;　/*　Firefox　*/
　　　　　　　　　　　　columns:　150px　3;　
}

Test See‹/›

Attribute Value

The table below describes the value of this attribute.

Value	Description
column-width	Specify the best width of the columns in a multi-column element.
column-count	Specify the best number of columns in a multi-column element.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements will use the attribute value of their parent element columns.

Browser Compatibility

Browser Compatibility of the columns attribute, the numbers in the table below represent the minimum version number of the browser that supports 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-