Multiple columns

The CSS Multi-column Layout Module (http://www.w3.org/TR/css3-multicol/) specifies how an author can display content within an element across a number of columns. Compass has a mixin to produce the necessary cross-browser code. I'll be honest, this isn't something I use very often (with large amounts of text you have to scroll down and then back up to carry on reading which feels wonky), but it's nice to have regardless. We'll add an HTML class to the second paragraph of our markup and then use this mixin:

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

Here is the effect in the browser:

We can amend this further by adding in a dividing rule like this:

.two-cols {
  @include column-count(3);
  @include column-rule(1px, dotted, lighten($color10, 84%));
}

Column rule syntax

The syntax for the arguments of the column rule mixin are the same as a CSS border; first the width of the dividing line, then the type of line, and finally the color, each separated with a comma.

Here is the effect...