Column count property (column-count)

The column-count CSS3 property describes the number of columns an element may be divided into. This property goes very well with the paragraphs written for an online journal or magazine.

Syntax:

selector {

column-count: number | auto | initial | inherit;

}

Values:

number; Represents the number of columns, the element's content should be split into
auto; Deafult value, that allows other properties (or browser) to determine the number of column.
initial, inherit

The value number is a strictly positive integer describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.

The value auto is a default value for column-count property and, if used, it indicates that the number of columns should be determined by other CSS properties, like column-width.

Other two possible values, initial and inherit are self-explanatory. More about them learn in CSS2 tutorial.

Example

The column-count property example in CSS3:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
  font-family:Arial; font-size:smaller; color:#444; 
  background-color:#fff;
  }
.colcount
 {
   column-count: 3;
   	-webkit-column-count: 3; /* Chrome, Safari, Opera */
   	-moz-column-count: 3; /* Firefox */
} 
</style>
</head>
<body>

<h3>Text divided into 3 columns</h3>
<div class ="colcount">
The value number is a strictly positive integer describing the ideal number of columns into which the content of the element will be flowed. If the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns.
The value auto is a default value for column-count property and, if used, it indicates that the number of columns should be determined by other CSS properties, like column-width.
Other two possible values, initial and inherit are self-explanatory. More about them learn in CSS2 tutorial.
</div>
  
</body>
</html>

›› go to examples ››

Column count property (column-count)

Syntax:

Values:

Example

The column-count property example in CSS3:

Comments

About

Contact

Get Connected