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:

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

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

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

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

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

Comments are closed.

Some Relevent Articles


Hi, I am vara designer with over good experience in website designing and development for varadesigns. I would like to share information for the community like coding and technology. I hope this information is usefull.
-vara