Wednesday, March 7, 2012

CSS3 Create Multiple Columns

It is possible to create multiple columns for laying out text With CSS3 - like in newspapers! with single html tags

Below are multiple column properties:

» column-count
» column-gap
» column-rule

Browser Support

Internet Explorer does not yet support the multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.

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

-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */

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

-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */

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

-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;

Read More At :