Frank's Musings

CSS3 has a module which describes Multi-column layout which at first glance seems similar to table layouts. The main difference is contents in a block with multi-column layout will flow into the multiple columns, while content in tables will stay within the original columns.

The multi-column layout working draft has been around for a while, but it is still a draft and subject to change.
The only browsers to support it at this time are Safari/Webkit (with the -webkit prefix) and Firefox (with the -moz prefix).

This first example lets you change many of the multi-column properties to see how they act and interact.
Demonstrated are column-count, column-width, column-gap, and column-rule, along with how other box model properties affect the columns.

• Column count:
  auto
  1
  2
  3
• Column width:
  auto
  10em
  15em
• Column gap:
  0
  normal
  2em
• Column rule:
• Text alignment:
  left
  justify
• Paragraph border:
• Paragraph padding:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius lacus a elit. Sed non arcu. Maecenas sodales interdum arcu. Phasellus tempor. Aenean nec urna. Vivamus urna. Maecenas consectetur, purus ac bibendum rutrum, quam justo lobortis ligula, tristique eleifend lectus risus eu magna. Aliquam iaculis vulputate velit. Nunc neque purus, consectetur ac, lobortis vitae, consectetur sit amet, metus. Cras adipiscing congue nulla. Aliquam quis lacus. In nibh. In hac habitasse platea dictumst. Phasellus a tellus.

Some items of note:

• The column-gap setting includes the width of column-rule, and the rule will be centered in the gap.
  The rule will not appear if it is wider than the gap, which is why you will see no column rule if the gap is set to 0 (the column rule is set to 1px).
• Column rules are not implemented in the latest released Firefox (3.0.10 as of this posting) but they are supported in the 3.5 beta.
• Safari exhibits odd behavior when you switch from text-align: justify and back to left: the border surrounding the example and its controls will no longer enclose the paragraph and will act as if it had float: left added to it.
  This is why the the first part of the following text is on the right side of the sample text’s container.
  When a word is too long to fit on the right side, it will appear below the container.
• Safari makes some interesting choices when computing the lengths of the columns.
  If you switch to 3 columns and no column gap, you’ll notice the last column is longer than the other two.
  This seems to be some sort of rounding error.

Declaring either or both a column count and width

Keeping in mind that the multi-columns working draft is still a work in progress, it says:

Note that, in most cases, only one of column-width and column-count affect the layout.
If column-width has a value other than auto, column-count will be ignored.
The only case when both column-width and column-count can affect the layout is for element where the width of the element has not been determined.
This can, e.g., be the case for table cells and floats.

Safari and Firefox, for the most part, have different implementations when computing counts and widths when both are specified, but seem consistent when only one is specified.

column-count: 1

Both browsers will completely ignore column-width when one column is specified.
They will make the column be the full width of the container, as if neither count nor width were specified.

Declaring only column count

Both browsers will size the column width to fit the specified number of columns and column gap into the container.
The above example is not designed to demonstrate these behaviors.

Safari will try very hard to keep all the columns visible, even if it means truncating content.
Only when the sum of the column gaps is wider than the container will Safari start causing columns to overflow to the right of the container.
Setting overflow: visible (the default when using columns is hidden) will not make those columns appear, however.

Firefox will cause columns to overflow off the right of the container sooner than Safari, but setting overflow: visible will create a scrollbar instead of just showing the extra columns on the right of the container.

If you specify a height for the container and have too much content for the number of columns, Safari will add columns to the right which are visible with overflow: visible.

Firefox will act like Safari if you give the container a height, but if you instead give it a max-height, the columns will extend below the container and honor overflow visibility.

Declaring only column width

When you only declare the width of the columns, both browsers will compute how many columns will fit in the container and then expand those column sizes to fill the container.
You can see this because if you set the width of the columns in the example to 10em, the columns will be a bit wider than 10em. Likewise for 15em.

Declaring both column count and width

If you declare both the column count and width for Safari, it will honor both if it can.
However, if the number of specified columns will not fit at the given width, it will figure out how many columns of that width will fit and then increase the width of those columns to fill the container.
In the example, you will see no difference when you set the width to 15em and select either there columns or auto.

Firefox will act as Safari does, but it will always expand the column widths to fit into the container.
So while Safari will show two columns of width 10em and leave whitespace to the right of them, Firefox will not have the whitespace.

Safari and content flowing

In addition to computing what goes into which column, this next example shows another Safari behavior which could be considered a bug with how Safari computes where columns should break:

• First item
• Second item
• Third item

This example’s HTML is an unordered list with three items.
The list items have margin: 1px, border: 1px black solid, and padding: 3px, as well as being set to display: block to suppress the bullets.
Here are a screenshots of the center part using Safari and Firefox:

Safari

Firefox

As you can see, Safari has the top of the border for the second item in the first column, as well as all the top padding.
It seems that Safari is taking the height of the text into account but not anything which could change that height (inline blocks and form controls also have this effect).
Firefox displays the items as you would expect: the first two items with their complete borders in the first column and the complete last item with its border in the second column.

These Safari behaviors also appear in the latest nightly build of Webkit.

Column breaks and spanning

Safari and Firefox support neither column breaks nor column spanning, as shown by this example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla justo purus, venenatis non, tincidunt vel, ullamcorper sit amet, enim.
Aliquam non leo at nisl porta interdum.
column-break-after: always set on this paragraph.

Aliquam justo eros, suscipit nec, tristique sed, fringilla vitae, sapien.
Duis lacinia orci vitae nisl sollicitudin mattis.
Nunc pellentesque nulla vel mi.
Mauris est.
Integer ipsum mi, posuere et, tempus sit amet, imperdiet quis, enim.
Mauris imperdiet, est sit amet venenatis fermentum, mi nibh interdum libero, eu pellentesque nisl diam ac nisl.
Mauris at magna quis ipsum suscipit pretium.

Header which spans across all columns

Nulla nec nisl sit amet urna feugiat congue.
Nunc tincidunt, elit eget scelerisque adipiscing, nunc odio volutpat erat, cursus pretium ipsum nulla in turpis.

The column-break-after: always set on the first paragraph shows in Safari’s Web inspector, even though the break doesn’t actually happen.
The rule doesn’t show up in Firebug for Firefox.

The header is set to span all columns, but it is displayed within a single column on both browsers.

It seems the example should look closer to:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla justo purus, venenatis non, tincidunt vel, ullamcorper sit amet, enim.
Aliquam non leo at nisl porta interdum.
column-break-after: always set on this paragraph.

Aliquam justo eros, suscipit nec, tristique sed, fringilla vitae, sapien.
Duis lacinia orci vitae nisl sollicitudin mattis.
Nunc pellentesque nulla vel mi.
Mauris est.
Integer ipsum mi, posuere et, tempus sit amet, imperdiet quis, enim.
Mauris imperdiet, est sit amet venenatis fermentum, mi nibh interdum libero, eu pellentesque nisl diam ac nisl.
Mauris at magna quis ipsum suscipit pretium.

Header which spans across all columns

Nulla nec nisl sit amet urna feugiat congue.
Nunc tincidunt, elit eget scelerisque adipiscing, nunc odio volutpat erat, cursus pretium ipsum nulla in turpis.

columns shorthand property

The Multi-column layout module defines the shorthand property columns which lets you specify the number of columns (column-count) and/or the column width (column-width).
You can use -webkit-columns with Safari and -moz-columns with Firefox, but the latter doesn’t seem to work, even with the 3.5 beta.

The following example shows how Firefox will display multiple columns when using the discrete properties but not the shorthand property:

• Use shorthand columns: 2
• Use explicit column-count: 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus interdum sagittis orci.
Ut commodo sodales quam.
Vestibulum tristique, est ac imperdiet faucibus, libero ipsum placerat.

If you use Firebug to inspect the paragraph above, you’ll see that the p#colshortex.colshort selector has no properties which are applied, even though the source declares -moz-columns: 2.
When you switch to using the explcit property Firebug will show the -moz-column-count: 2 property declared in p#colshortex.colexplicit.