CSS3 Click Chart | CSS3 Browser Support and Information

Multiple Columns

Allows the text in an element to be divided into colums, similar to newspaper layouts.

Specification

Example Code

.element {
    -webkit-column-count: 3;
    -webkit-column-width: 75px;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #fff;
    -moz-column-count: 3;
    -moz-column-width: 75px;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #fff;
    -o-column-count: 3;
    -o-column-width: 75px;
    -o-column-gap: 20px;
    -o-column-rule: 1px solid #fff;
    column-count: 3;
    column-width: 75px;
    column-gap: 20px;
    column-rule: 1px solid #fff;
}

Live Demonstration

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.

Desktop Browser Support

Standard Syntax:
IE10+, Opera 11.1+

Vendor Prefix:
Firefox 2+, Chrome 4+, Safari 3.1+

Tools / Polyfills

CSS3 Multi Columns

Tutorials / Articles

Intro to Multiple Columns