Ever needed to make a single piece of text appear in multiple columns? Until CSS3, you'd need to separate the content into different markup elements and then style accordingly. Altering markup for stylistic purposes is never a good practice. CSS3 allows us to span one or more pieces of content across multiple columns. Consider the following markup:

<div id="main" role="main">
    <p>lloremipsimLoremipsum dolor sit amet, consectetur
// LOTS MORE TEXT //
</p>
    <p>lloremipsimLoremipsum dolor sit amet, consectetur
// LOTS MORE TEXT //
</p>
</div>

You can make all that content flow across multiple columns that are either: a certain column width (for example, 12em) or certain number of columns (for example, 3). Here's how:

For a certain width of column, use the following syntax (note that vendor prefixes have been omitted for brevity):

#main {
  column-width: 12em;
} 

This will mean, no matter the viewport size, the content will span across columns that are 12 em in width. Altering the viewport will adjust the number of columns displayed dynamically.

For example, here it is in Safari with a 1024 px wide viewport:

And the following screenshot shows how the same page renders on an iPad with a 768 px wide viewport:

A beautifully responsive layout requiring the minimum of work—I like it!

If you'd rather keep a fixed number of columns and vary the width, you can write a rule like the following:

#main {
  column-count: 4;
}

Adding a gap and column divider

We can take things even further by adding a specified gap for the columns and a divider:

#main {
  column-gap: 2em;
  column-rule: thin dotted #999;
  column-width: 12em;
}

This gives us a result like the following:

To read the specification on the CSS3 Multi-column Layout Module, visit http://www.w3.org/TR/css3-multicol/.

For the time being, remember you'll need to use vendor prefixes on the column declarations for maximum compatibility.

How many times have you had to add a big URL into a tiny space and, well, despaired? Take a look at the problem in the following screenshot; notice the URL at the bottom right breaking out of its allocated space:

CSS3 fixes this problem with a simple declaration, which as chance would have it, also works in older versions of Internet Explorer as far back as 5.5!

word-wrap: break-word;

Adding this to the containing element gives an effect as shown in the following screenshot. Hey presto, the long URL now wraps perfectly!