Creating a multiple columns layout, also known as the "newspaper layout", has been implemented by web developers for quite some time now. However, this has often resulted in the use of
flaky techniques and floats. Using these techniques generally results in a very time consuming process. Fortunately CSS3 provides a multi-column layout module which offers more flexibility and
control over previous techniques and methods.
Browser Support
Before you start to implement this module, you should be aware that there is limited browser support at this time. Internet Explorer 10+ as well as Firefox, Chrome, Safari, and Opera support
this module. However, while Internet Explorer 10 and Opera provide native support, Firefox, Chrome, and Safari require their vendor prefixes at this time. Previous versions of Internet Explorer do
not provide any support for this module.
| Browser | Vendor Prefix |
|---|
| Internet Explorer 10+ | none |
| Firefox | -moz-column(s)-*-* |
| Opera | None |
| Safari | -webkit-column(s)-*-* |
| Chrome | -webkit-column(s)-*-* |
Your browser
may support CSS3 Multi Columns Module.
Multiple Columns Properties
You should at the very least, specify the number columns, or the width or your columns, within a multi-column element. However, there are additional properties we will cover that are part of this module.
| Property | Description |
|---|
| columns | A shorthand property for setting column-width and column-count |
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies the width of the columns |
If your browser supports the multi-column layout module, then the results of using the properties discussed in this overview will result in this type of layout for the target content.
Creating Columns
You can use the shorthand column property to specify the number of columns and/or the width of the columns. Alternatively, you should use the column-count and column-width properties as described below.
The column property accepts one or two values. If you supply two values, one of the values should be set to auto. Auto is the default value for count and width.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#multi {
-moz-columns:300px auto;
-webkit-columns:300px auto;
columns:300px auto;
-moz-columns:auto 3;
-webkit-columns:auto 3;
columns:auto 3;
-moz-columns:300px;
-webkit-columns:300px;
columns:300px;
-moz-columns:3;
-webkit-columns:3;
columns:3;
}
</style>
</head>
<body>
<div id="mutli">Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...</div>
</body>
</html>
Results
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
column-width Property
The column-width property does exactly what it states. It allows you to specify a fixed width for the columns. Values can be expressed using common CSS measurements such as px, em, etc.
If this property is set to 'auto', then the width of the columns will be dictated by other properties, such as column-count.
column-width: auto|[length];
column-count Property
If you prefer split up the content based on the number of columns instead of by width, then use the column-count property. The content will divided into the required number of columns.
If this property is set to 'auto', then the number columns will be decided by other properties, such as column-width.
column-width: auto|[number];
column-gap Property
The column-gap property provides for the ability to add a space between each of the columns. The width of the gap is done by using standard CSS measurements. The width of the gap that you specify cannot be
a negative number.
column-gap: normal|[length];
column-rule Property
The column-rule property essentially places a border down the middle of the column-gap. To use the column-rule property, the column-gap property is also used and the width must be specified must have the
same or larger value than the column-rule. The column-rule property is a shorthand property for column-rule-color, column-rule-style, and column-rule-width.
column-rule: column-rule-width column-rule-style column-rule-color;
column-rule-width: thin|medium|thick|[length];
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
column-rule-color: color;
column-span Property
The column-span property allows you to span across all of the columns. For example, if you have an element such as a header (h1) that you would like to span across all of the columns, you can
use the column-span:all property/value and apply it to the h1 selector.
column-span: all|none;
column-fill Property
The column-fill property gives accepts two values for setting how the amount of the content is balanced over the columns. If the property is set to 'balance', then the variation in the column length
will be minimized and all lengths will be as equal as possible. If set to 'auto' then the columns will be filled in order. For example, this may result in the 3rd of 3 columns having less content than the
2 previous columns. The balance property value provides for roughly equal height in each column.
column-fill: balance|auto;
Example
<!DOCTYPE html>
<html>
<head>
<style>
#multi {
line-height:1.5em;
-moz-columns:3;
-webkit-columns:3;
columns:3;
-moz-column-gap:80px;
-webkit-column-gap:80px;
column-gap:80px;
-moz-column-rule:4px solid #ababab;
-webkit-column-rule:4px solid #ababab;
column-rule:4px solid #AAAAAA;
}
</style>
</head>
<body>
<div id="mutli">Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...</div>
</body>
</html>
If your browser supports the multi-column layout model, you should see the following content split into three columns with a column rule in between the columns.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
