Newspaper Layouts on the Web – CSS3 Columns

I was working on something where I wanted to explore the idea of multi-column layouts, newspaper style if you will. For years people have tried to do this in websites with not much luck – lots of messy JavaScript yielding unpredictable results. But as with most things like this I’ve been trying to do lately I figured there might be a solution in CSS3, and a quick search showed me there was. Just like when I was looking into overriding the default text selection color it took just a few lines of code to see the power of the multi-column layout module.

So to define three columns:

  <style>
    p{
      -moz-column-count: 3;
      -moz-column-gap: 20px;
      -webkit-column-count: 3;
      -webkit-column-gap: 20px;
      column-count: 3;
      column-gap: 20px;
    }
  </style>

Produces:

You will need Firefox or Safari to see the effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit hendrerit eros, ac ultrices libero ullamcorper id. Pellentesque aliquet, felis quis imperdiet tincidunt, nisi lorem commodo felis, non varius tellus turpis eget nisl. Pellentesque est purus, sagittis ultricies dictum vel, volutpat sed urna. In ante dui, ultricies in pharetra non, pulvinar tincidunt felis. Nullam sed nisl ipsum, eget pulvinar leo. Phasellus pulvinar faucibus dui sit amet scelerisque. Pellentesque malesuada pellentesque turpis, a eleifend nulla mattis non. Integer commodo est quis elit mollis accumsan. Sed eu metus sed nulla aliquet facilisis. Mauris viverra sollicitudin rhoncus. Nam luctus dictum nulla. Morbi vel mollis leo. Aliquam erat volutpat. Maecenas ultricies nulla sollicitudin tortor interdum non fermentum purus tincidunt. Vivamus luctus turpis ut diam suscipit eget suscipit neque lobortis. Nam fermentum faucibus augue quis tincidunt. Vestibulum urna ante, adipiscing non dignissim a, dignissim sed augue. Curabitur dignissim viverra magna tincidunt fringilla. Phasellus ultricies pharetra enim quis facilisis. Pellentesque vitae massa sed elit mollis imperdiet.

God knows why but Safari and Mozilla both have their own special prefixes (-webkit- and -mozilla-) and then there’s the standard declaration, so using all three should make all your work forwards compatible.

You can also set the column width and it calculates the number of columns for you:

  <style>
    p{
      -moz-column-width: 150px;
      -moz-column-gap: 20px;
      -webkit-column-width: 150px;
      -webkit-column-gap: 20px;
      column-width: 150px;
      column-gap: 20px;
    }
  </style>

Looks like this:

Again, you will need Firefox or Safari to see the effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit hendrerit eros, ac ultrices libero ullamcorper id. Pellentesque aliquet, felis quis imperdiet tincidunt, nisi lorem commodo felis, non varius tellus turpis eget nisl. Pellentesque est purus, sagittis ultricies dictum vel, volutpat sed urna. In ante dui, ultricies in pharetra non, pulvinar tincidunt felis. Nullam sed nisl ipsum, eget pulvinar leo. Phasellus pulvinar faucibus dui sit amet scelerisque. Pellentesque malesuada pellentesque turpis, a eleifend nulla mattis non. Integer commodo est quis elit mollis accumsan. Sed eu metus sed nulla aliquet facilisis. Mauris viverra sollicitudin rhoncus. Nam luctus dictum nulla. Morbi vel mollis leo. Aliquam erat volutpat. Maecenas ultricies nulla sollicitudin tortor interdum non fermentum purus tincidunt. Vivamus luctus turpis ut diam suscipit eget suscipit neque lobortis. Nam fermentum faucibus augue quis tincidunt. Vestibulum urna ante, adipiscing non dignissim a, dignissim sed augue. Curabitur dignissim viverra magna tincidunt fringilla. Phasellus ultricies pharetra enim quis facilisis. Pellentesque vitae massa sed elit mollis imperdiet.

Pretty cool huh? I love the instant gratification this CSS3 stuff gives. To do the same in Javascript would take a ton of thought and work and a bunch of fuckin around, and even then it would probably still need to be fine tuned on a case by case basis. Of course it was quick to pick-up but there is a lot more to it, PPK worked it all out really well a whole 10 months ago now, so if you’re gonna use it then read up on it, and be conscious about the ramifications of what it will look like in a non supported browser.

Also I think it’s worth noting, be careful when using this. Don’t get me wrong I think it’s really cool and will have a lot of use for it, but the web as a platform is way different than a newspaper, don’t make your users scroll up and down a bunch of times to read an article!