CSS multi column text

May 23rd, 2010 by JorisO | Filed under CSS3, Front-end development.

CSS 3 provides a new collection of column properties that allow you to easily distribute a HTML container’s textual content over multiple vertical columns. At the time of writing this property is supported by Mozilla and Webkit browsers, and -moz / -webkit vendor prefixes are still needed.

column-count and column-gap

The column-count property allows you to specify the number of columns you wish to divide your columns into. The column gap then let’s you specify the space between your columns.
Example: 

-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;

This CSS will create the following column lay-out:

This document forms one part of a modular set of Working Drafts which will, when complete, define the next level of CSS. There is consensus in the W3C Working Group on CSS&FP that the functionality described in this document is important to improve formatting, especially printing, from the Web. There is not yet consensus on the CSS syntax for describing multicolumn layouts. The goal of this draft is to describe a CSS syntax for multicolumn layout that is highly versatile yet easy to use. This document we defines a set of of CSS properties that address the following requirements:

The style sheet specifies the number of columns and lets the UA choose the dimensions.

the style sheet specifies a column width and lets the UA determine how many columns there is room for.

the style sheet specifies both the number of columns and their widths

In all three cases, the UA determines the height of the columns based on the content which needs to be fitted. Content should be balanced between columns to minimize the heights of columns.

To describe the number and widths of columns, and the gap between columns, three new CSS properties are proposed.

column-width

The column-width property allows you to specify how wide you’d like your columns to be.
And so this css

-moz-column-width: 200px;
-webkit-column-width:200px;
column-width: 200px;

Results in this column lay-out:

This document forms one part of a modular set of Working Drafts which will, when complete, define the next level of CSS. There is consensus in the W3C Working Group on CSS&FP that the functionality described in this document is important to improve formatting, especially printing, from the Web. There is not yet consensus on the CSS syntax for describing multicolumn layouts. The goal of this draft is to describe a CSS syntax for multicolumn layout that is highly versatile yet easy to use. This document we defines a set of of CSS properties that address the following requirements:

The style sheet specifies the number of columns and lets the UA choose the dimensions.

the style sheet specifies a column width and lets the UA determine how many columns there is room for.

the style sheet specifies both the number of columns and their widths

In all three cases, the UA determines the height of the columns based on the content which needs to be fitted. Content should be balanced between columns to minimize the heights of columns.

column-rule

The rule directive let’s you specify a border in-between columns. 


-moz-column-rule: 1px dotted black;
-webkit-column-rule:1px dotted black ;
column-rule: 1px dotted black;

-moz-column-width: 200px;
-webkit-column-width:200px;
column-width: 200px;
This document forms one part of a modular set of Working Drafts which will, when complete, define the next level of CSS. There is consensus in the W3C Working Group on CSS&FP that the functionality described in this document is important to improve formatting, especially printing, from the Web. There is not yet consensus on the CSS syntax for describing multicolumn layouts. The goal of this draft is to describe a CSS syntax for multicolumn layout that is highly versatile yet easy to use. This document we defines a set of of CSS properties that address the following requirements:

Other articles on CSS3 multi column lay-outs :

Tags: ,

«
»

One Response to “CSS multi column text”

  1. CSS multi column text – WipWapWebdesign | My Blog says:
    May 23, 2010 at 11:10 PM

    [...] post: CSS multi column text – WipWapWebdesign This entry was posted on Sunday, May 23rd, 2010 at 4:02 pm and is filed under Uncategorized. You [...]

    Reply

Leave a Reply