CSS3 Text Columns

Contact Us or call 1-877-932-8228
CSS3 Text Columns

CSS3 Text Columns

CSS3 introduced tools for formatting text into multiple columns, much like one might see in a print newspaper. While not page layout per se (that is, we don't use it to position the header, navigation, and footer elements), the CSS3 "Multiple-column Layout Module" offers an easy way to organize text content into columns. We can control the size and number of columns, the gap between columns, and an optional rule between columns. Listed below are the relevant properties:

While browser support for CSS3 features like columns is better and better with each version of the major browsers, it's a good idea to use the corresponding -webkit- and -moz- vendor prefixes (for Safari/Chrome and Firefox, respectively) for these properties; Internet Explorer supports unprefixed column properties from version 10. See caniuse.com for current browser support.

CSS3 Columns
Property Description Example/Possible Values
columns Shorthand for setting width and count columns: 10em 2;
column-count Number of columns Number of columns or auto
column-fill How to populate columns with content auto (fill columns sequentially) or balance (balance content equally, as possible)
column-gap Size of gap between columns pixel or em length or normal
column-rule Width, style, and color of rule 2px dotted #000 or 1px solid hsl(20, 20%, 90%); can also specify column-rule-width, column-rule-style, and column-rule-color properties explicitly
column-span How many columns an element should span none, 1 or all [NB: not well supported by browsers]
column-width Width of columns in pixels or ems, or auto column-width:45px

At its simplest, we can use the shorthand columns property to specify the width and number of columns:

.columns { columns: auto 3; }

The code above would style any element of class columns to flow text into three columns (because the second parameter has value 3) of equal width (because the first parameter has value auto). We can use any of the specific properties to exercise more control over the layout - to add a rule, say, between the columns or to add a gap between the columns.

Let's look at an example that demonstrates CSS3 columns:

Code Sample:

* {
	margin: 0;
	padding: 0;
	border: 0;
#wrapper {
	border: 1px solid #000;
	width: 950px;
	margin: auto;
#header {
	border-bottom: 1px solid #000;
	padding: 10px;
	background-color: #eee;
#main {
	background-image: url(Images/bgMain.gif);
	background-repeat: repeat-y;
#menu {
	width: 180px;
	float: left;
	padding: 10px;
	border-right: 1px solid #000;
	color: #fff;
#content {
	border-left:1px solid #000;
#content h2 {
#content .columns {
	-moz-columns:auto  2;
	-webkit-columns:auto 2;
	columns:auto 2;
	-moz-column-rule:1px solid #000;
	-webkit-column-rule:1px solid #000;
	column-rule:1px solid #000;
#content p {
.clearer {
	clear: both;
#footer {
	border-top: 1px solid #000;
	background-color: #eee;

Code Explanation

Open ClassFiles/CssPageLayout/Demos/fixed-two-column-text-columns.html in a text editor and in a browser to view the results; open ClassFiles/CssPageLayout/Demos/fixed-two-column-text-columns.css in a code editor to view the CSS code. We use a two-column fixed layout (that is, with the navigation on the left and the main content on the right) and we display the text in the large main column in two columns:

Columns demo

Inside the article with id content, we add a div with class columns, wrapping a series of paragraphs with text content.

In the CSS file, we style this new div so it has two equal-width columns (columns:auto 2) and add a thin, black vertical rule between the columns (column-rule:1px solid #000).