How to Make Multiple Columns of Text in CSS
Publications such as newspapers and magazines format text into columns for easier reading, since the eye tends to wander when reading long lines of text. Since Cascading Style Sheets level 3 (CSS3) has added properties for formatting with multiple columns, this is a good effect to add to your Web pages. Use multiple columns to break up large chunks of text and long bullet lists. Keep in mind, though, that older Web browsers will not support multiple columns without a JavaScript fallback.
Other People Are Reading
Instructions
-
-
1
Open your CSS file in Notepad or a code editor and add a new style rule:
.text-columns {
}
This rule selects any HTML element with a class name of "text-columns." You can use this later to add column styles to any text on your Web page.
-
2
Set your number of columns using the "column-count" property:
.text-columns {
column-count: 4;
}
You can set whatever number of columns you want for this property, though keep in mind Firefox will not break up long words, causing them to flow over into other columns if you set an excessive number of them. Webkit-based browsers Chrome and Safari do break up the words, though.
-
-
3
Define the size of the gutters between columns using the "column-gap" property:
.text-columns {
column-count: 4;
column-gap: 10px;
}
Do not use percentage values like "10%" in this property because browsers will ignore it. You can, however, use ems to give your column gaps sizes relative to the column text: "2em".
-
4
Add column rules if you want lines separating the columns:
.text-columns {
column-count: 4;
column-gap: 10px;
column-rule: 1px solid #eee;
}
The "column-rule" property takes three values: rule width, rule style and color. These values work just like those of borders. You can also set styles like "dashed" to create a dashed column rule. Note that rules look better inside larger column gaps of twenty pixels or more.
-
5
Duplicate all of your column properties and add the "-moz" prefix to each one. Do the same for "-webkit":
.text-columns {
column-count: 4;
column-gap: 10px;
column-rule: 1px solid #eee;
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-rule: 1px solid #eee;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-rule: 1px solid #eee;
}
This will add support for Firefox, Chrome and Safari until they fully implement columns as a standard. Opera already supports CSS columns without browser prefixes. Internet Explorer 9 does not support them at all but will support them fully in version 10.
-
6
Open your Web page in Notepad or a code editor and find the tags for any elements where you want to make the text display in columns. Add the "text-columns" class name:
<div class="text-columns">
Content here...
</div>
You can add columns to other kinds of text besides plain paragraphs. Add columns to bullet lists or numbered lists, too.
-
1
