CSS Text Multi-Columns

• 0Comments
• The Author
• Information

Edd Turtle

Software Engineering Student & Self-taught Front-end Web Developer. Lover of coffee, exploring and climbing.

Can be found @eddturtle.

Columns are lovely things. They allow you to read text easier, make chunks of text look nicer and now with the power and beauty of CSS3 you can make columns dynamically – yey! No more table columns and splitting of paragraphs to achieve the same effect.

This is supported by Chrome & Safari (with -webkit- prefix), Firefox (with -moz- prefix) and Opera.

Update: A jQuery fall-back, called Columnizer, is available with support for IE.

Update 2: Column support will be implemented in IE10

CSS Syntax

p
{
	column-count: 2;
	column-gap: 30px;
}

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut lorem erat. Suspendisse blandit pellentesque mattis. Donec condimentum venenatis quam at vulputate. Suspendisse potenti. Quisque pretium enim nec lectus sodales molestie. Suspendisse sollicitudin justo diam, in bibendum arcu. Vestibulum a nunc elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec et nulla augue.

.columndemo
{
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-moz-column-rule: 2px solid #36F;
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	-webkit-column-rule: 2px solid #36F;
	column-count: 2;
	column-gap: 30px;
	column-rule: 2px solid #36F;

	text-align: justify;
}

This is all well and good if you’re using an adequate web browser, but what if you’re not? Shouldn’t you get a similar user experience which ever browser you’re using? Well, like with most CSS3 functionality, it is possible to run a JavaScript fall-back. More information on this can be found here.

Cover Photo by 96dpi

  Recent Articles

Blur a Background Image (with help from blur.js)

Recently, in a very small project of mine, I wanted to create a full-size image as the background and to blur it a little to create an abstract but interesting backing image. Initially, we...

View Full Post →

Showing your E-mail Online

We all know about spam and up until recently there wasn't an e-mail address shown on this blog (just a contact form) for this very reason. Most of us have also tried different methods of s...

View Full Post →