codescracker


css

CSS Multi-Column Model



« Previous Tutorial Next Tutorial »


At times, you need to display your Web content in multiple columns just like the columns of a newspaper.

CSS enables you to show your element content in multiple columns. The W3C organization introduces the multi-column model to extend the current CSS box model.

Show Content of Web Page in Multiple Columns

Following figure shows the content of a Web page in multiple columns :

css multi column model

CSS provides the following properties to show the content in multiple columns :

Let's discuss these properties one by one in detail.

CSS column-count

The column-count specifies the number of columns to display the content of an element. The column-count property describes the number of columns of the multicol element.

The syntax to use the column-count property is given as follows :

column-count: <integer> | auto;

In the preceding syntax, the <integer> parameter specifies the number of columns in which the content of the element is displayed. The auto keyword specifies that the number of columns is determined by other properties.

CSS column-width

The column-width specifies the width of a column. The column-width property describes the width of columns in multicol elements. A multicol element is the element, whose column-width property is not set to auto.

The syntax to use the column-width property is given as follows :

column-width: <length> | auto;

In the preceding syntax, the <length> parameter stands for the column width of a column.

Note that the specified width of a column can be wider or narrower with respect to the actual available space and the browser will show the content accordingly. The auto keyword specifies that the column width is determined by other properties.

CSS column-gap

The column-gap specifies the padding between columns. The column-gap property sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.

The syntax to use the column-gap property is given as follows :

column-gap: <length> | normal;

In the preceding syntax, the <length> parameter stands for the length of the gap between columns. The normal value specifies the default value for the column gaps. Note that column gaps cannot be negative.

CSS column-rule

The column-rule specifies a border between columns. The column-rule property inserts a line between columns.

The syntax to use the column-rule property is given as follows :

column-rule: <column-rule-width> || <border-style> || [ <color> | transparent ];

The column-rule property is a shorthand for setting all the other properties related to columns, such as column-rule-width, column-rule-style, and column-rule-color. These properties are described as follows :

CSS column-fill

The column-fill balances the content of an element in all the specified columns equally.

The syntax to use the column-fill property is given as follows :

column-fill: auto | balance;

In the preceding syntax, the value, balance, specifies that the content of an element is equally divided between columns; while the value, auto, specifies that the columns are filled sequentially.

CSS column-span

The column-span specifies that elements are set to span across all columns. The column-span property is used to span the content of an element over multiple columns. It enables you to span an element across several columns.

Note that an element that spans more than one columns is called a spanning element.

The syntax to use the column-span property is given as follows :

column-span: 1 | all;

In the preceding syntax, the value, 1, specifies that the element does not span multiple columns; while the value, all specifies that the element spans across all columns.

CSS Multi-Column Example

Some examples of using the above properties are given as follows :

Ibody{column-width:12em;}			/* Example 1 */
IIbody{column-count:2;}				/* Example 2 */
IIIbody{column-gap:1em;column-rule:thin solid black;}    /* Example 3* /
div{column-fill:balance;}			/* Example 4 */
h2{column-span:all;}				/* Example 5 */

The description of the preceding examples is given as follows:

CSS Shorthand Columns Property

You can also use the shorthand columns property to set any or all the properties in one declaration.

The following example shows how to use the shorthand columns property :

body {
columns: 2 12em }

In the preceding example, the number and widths of columns is set.

You should note that at the time of displaying the content of an element in multiple columns, you also need to determine where column breaks are placed.

Some properties that are newly introduced in CSS3 to insert column breaks are given as follows :

(i) break-before - Specifies a break that should be inserted before the content of an element. The syntax to use the break-before property is given as follows :

break-before auto | always | avoid | left | right | page | column |
avoid-page | avoid-column;

(ii) break-after - Specifies a break that should be inserted after the content of an element. The syntax to use the break-after property is given as follows :

break-after auto | always | avoid | left | right | page | column |
avoid-page | avoid-column;

(iii) break-inside - Specifies an internal break. The syntax to use the break-inside property is given as follows :

break-inside auto | avoid | avoid-page | avoid-column;

Values Used in Column or Page Breaks

The preceding properties uses the values described in the following table :

Value Description
auto Specifies that a page/column break is neither forced nor forbidded to generate before, after, or inside a box
always Specifies that a page break is always forcedly generated before or after a box
avoid Specifies that a page/column break is avoided to be generated before, after, or inside a box
left Specifies one or two page breaks to be forcedly generated before or after a box so that the next page is formatted as a left page
right Specifies one or two page breaks to be forcedly generated before or after a box so that the next page is formatted as a right page
page Specifies that a page break is forcedly generated before or after a box
column Specifies that a column break is forcedly generated before or after a box
avoid-page Specifies that a page break is avoided to be generated before, after, or inside a box
avoid-column Specifies that a column break is avoided to be generated before, after, or inside a box

Some examples of inserting or avoiding column or page breaks are as follows :

.multicol img { break-after: column }		/* Example 1 */
p { break-inside: avoid-column } 		/* Example 2 */

In the Example 1, a column break is generated after inserting an image; while in Example 2, a column break is avoided.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test