How to use 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
Internet Explorer 10 and Opera supports multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the multiple columns properties.
CSS3 Create Multiple Columns
The column-count property specifies the number of columns an element should be divided into:
Divide the text in a div element into three columns:
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
CSS3 Specify the Gap Between Columns
The column-gap property specifies the gap between the columns:
Specify a 40 pixels gap between the columns:
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
CSS3 Column Rules
The column-rule property sets the width, style, and color of the rule between columns.
Specify 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;
}
Live example for CSS3 Multiple Columns is shown below:
Note: Internet Explorer 9, and earlier versions, does not support the column-rule property.
