CSS3 LAYOUT CHOPS - Practical CSS3: Develop and Design - page 248

The problem with column-fill is that it only has an effect when you set a
fixed height on the container that you are applying multi-col effects to, as you did
in this example. From my experience, you'll almost never want to do this because
you can rarely control the exact amount of content you'll want to show across
multiple pages using the same template. So column-fill is of limited use in my
opinion. I've left the code in the example for you to look at but commented it out.
SPAN CONTENT ACROSS MULTIPLE COLUMNS
Usually, you won't want all your content to just sit in one column. The example
could definitely do with some sorting out of those top-level headings, and the
image is cut off. What can you do, aside from going down to the pub (or better still,
logging on to Twitter) and complaining about the web not being print? You can
remedy these problems somewhat with the column-span property. Look at the file
simple-multi-col2.html. It is the same as the previous example, except that it has
an image added into the main content body. Let's make the main headings and the
image span all the columns, like so:
section h2 {
: ;
}
section h2 + p, section img + p {
: ;
}
section img {
: ;
margin: 1rem auto;
}