Multiple Columns 83
In this case, value can be only one of two possibilities: all or none. The
default is none, which keeps the element in the column flow. The alterna-
tive value, all, provides a break in the flow—all content before the element
will be distributed into columns, and all content after the element will be
distributed into columns, but the element itself—known as the spanning
element—will not.
In the following example, the h2 element has a column-span value of all,
so it spans multiple columns, causing a break in the text flow. You can see
the result in Figure 7-9.
h2 { column-span: all; }
Figure 7-9: An h2 element spans two columns
Firefox is the only browser not to support this property at the time of
writing.
Summary
Although CSS3 makes flowing your content into columns easy, the chal-
lenges it presents are not so much technical as they are practical: What hap-
pens if you want to use images that are wider than a column or if you want
to use long headlines in narrow columns?
Although using multiple columns is definitely appropriate in certain
situations, think twice about whether your content is suitable. Make sure
you have full control over your content before using these properties, and
don’t design websites that rely on multiple columns if your client doesn’t
have a dedicated and conscientious web content team.
Also, bear in mind that screen resolutions can vary dramatically, and
content that looks readable to you may not be readable to the visitors of
your website. If they have to scroll up and down too frequently, which can
cause lots of confusion, they may be put off from visiting your site altogether.
But with all that said, clever use of columns can make your content much
more readable.
