7th of Jun, 2011

short url: http://foe.rs/36

CSS3 column-count and multiple paragraphs

If you’re looking to use the CSS3 column count property as a way to give your site visitors (those who use modern browsers) easier to read multi-column layouts, this may be of help…

First off, this property isn’t supported across the board, and of those browsers that do allow control of columns through CSS most require a proprietary prefix. If you want the text to appear in columns for everyone you’re going to have to have some help from JS or PHP etc.

If you’ve got your fall back sorted, or if you’re happy to give those on older browsers single column text, you can apply the right properties to the paragraph tag – or so I though.

My initial CSS looked like this:

p {
font-family: Helvetica, Verdana, Arial, sans-serif;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}

It’s pretty obvious what’s supposed to be going on there – 2 columns spanning the width of the page with a 20px gap between. Simples.

That works perfectly until you come across multiple paragraphs in a block of text. Then it all goes a bit wrong.

For example, imagine we want to separate the following block of text into two columns:


<p>One one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one.</p>

<p>Two two two two two two two two two two two two two two two two two</p>


<p>Three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three three.</p>

If we use the CSS from earlier, the output (with a bit of extra styling to make it look half decent) is this:

As you can see the paragraphs are being individually separated into columns, not the block of text as a whole.

All of this makes perfect sense when you stop and think about it, but very few of the demos and tutorials currently available show multi-paragraph examples; and all show the <p> tag as having the column-count applied to it.

The simple and obvious solution to this is to wrap the block of text in something, and apply the column-count property to that.

To keep things neat and proper, I’d suggest either <article> or <section>* though you may have other items within these you don’t want the column-count applied to (headings, images etc). If that’s the case you may need to go down the <div> route wrapping just the paragraphs and nothing else. You’ll then end up with this: