Multi Column Text With Css3 And Compass

06-12-2011

Setting text into multiple columns is a technique more commonly used in print. Some will argue that this practice is entirely misplaced in the post-foldian world we call the Internet. Let's pretend that you have an opportunity to do something different, or, maybe that someone is forcing you into doing something you _KNOW_ is wrong... Whatever the case may be, let's makes some sassy columns!

  .two-column {
    @include column-count(2);
  }

Pretty neat, eh? We can thank Compass for doing the heavy lifting here. Just tell the column-count mixin how many columns you want and it will do the rest. The CSS Compass creates from the SCSS above is:

    .two-column {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      -o-column-count: 2;
      column-count: 2;
  }

If you aren't familiar with Compass you should probably check it out for a lot more reasons than columns. While it is built in Ruby, you can easily use it on almost any project that requires CSS. I will change your life, try it ;)

There is more

Compass also provides mixins to control the column width and gap width between the columns, as well as several mixins for styling adding and styling the rule (or border) between the columns:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I'll send you to the docs to figure out what all is going on with the Lorem ipsum above.

Caveats

While playing with with these columns, I've noticed that Webkit doesn't always maintain a nice baseline across the top row of each column. Depending on your text, you may notice the top of the columns doesn't match up nicely. If you are using Chrome or Sarafi, the above columns may not line up as nicely as they do in Firefox. You can read more about that issue here

Finally if you are using IE, you probably aren't seeing any of the columns on this page, but hey, at least it didn't break your browser!