X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

CSS3 Multiple Columns


CSS3 Multiple Columns

With CSS3, you can create multiple columns for laying out text - like in newspapers!

In this chapter you will learn about the following multiple column properties:

  • column-count
  • column-gap
  • column-rule

Browser Support

The numbers in the table specifies the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specifies the first version that worked with a prefix.

Property
column-count 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 10.0 4.0 -webkit- 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1


CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into:

Example

Divide the text in a div element into three columns:

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Try it yourself »


CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns:

Example

Specify a 40 pixels gap between the columns:

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

Try it yourself »


CSS3 Column Rules

The column-rule property sets the width, style, and color of the rule between columns.

Example

Specify the width, style and color of the rule between columns:

div {
    -webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 3px outset #ff00ff; /* Firefox */
    column-rule: 3px outset #ff00ff;
}

Try it yourself »


CSS3 Multiple Columns Properties

The following table lists all the multiple columns properties: 

Property Description CSS
column-count Specifies the number of columns an element should be divided into 3
column-fill Specifies how to fill columns 3
column-gap Specifies the gap between the columns 3
column-rule A shorthand property for setting all the column-rule-* properties 3
column-rule-color Specifies the color of the rule between columns 3
column-rule-style Specifies the style of the rule between columns 3
column-rule-width Specifies the width of the rule between columns 3
column-span Specifies how many columns an element should span across 3
column-width Specifies the width of the columns 3
columns A shorthand property for setting column-width and column-count 3



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook