CSS3 Multiple Column Layout

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.

Please help us spread the word by socializing it today!

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.

Recommended Books & Training Resources

Responsive Web Design with HTML5 and CSS3