HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

CSS Reference

CSS Reference
CSS Selectors
CSS Reference Aural
CSS Web Safe Fonts
CSS Units
CSS Colors
CSS Color Values
CSS Color Names
CSS Color HEX
CSS3 Browser Support

CSS Properties

animation

background

box

column

font

list-style

margin

nav

outline

padding

page-break

target

text

top

transform

transition

CSS3 columns Property

Complete CSS Reference

Example

Specify the width and number of columns:

div
{
columns:100px 3;
-webkit-columns:100px 3; /* Safari and Chrome */
-moz-columns:100px 3; /* Firefox */
}

Try it yourself »
More examples at the bottom of this page.

Browser Support

The columns property is only supported in Opera.

Safari and Chrome support an alternative, the -webkit-columns property.

Firefox supports an alternative, the -moz-columns property.

Definition and Usage

The columns property is a shorthand property for setting column-width and column-count.

Default value:	auto auto
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.columns="100px 3"

Syntax

columns: column-width column-count;

Value	Description
column-width	The width of the columns
column-count	The number of columns

Try it Yourself - Examples

Column-count
Divide the text in a div element into three columns.

Column-gap
Divide the text in a div element into three columns, and specify a 30 pixels gap between the columns.

Column-rule
Specify the width, style and color of the rule between columns.

CSS3 tutorial: CSS3 Multiple Columns