The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

82 Chapter 7

Figure 7-7: An img element wider than a column^1

As you can see, the image is displayed in the second column, but

the overflow is clipped at a point halfway inside the column-gap. The only

browser that differs from this behavior (at the time of writing) is Firefox,

which (unfortunately) keeps the width of the image but flows the content

of subsequent columns over it, as shown in Figure 7-8.

Figure 7-8: Firefox differs from all other browsers in the way it displays wide elements in

columns.

Hopefully, this issue will be fixed in a future release (perhaps even by

the time you read this).

To work around the problem entirely, I could set a value of 100% on the

max-width property of the image, as the width is calculated from that of its

containing column, rather than the parent element.

Chapter 7: Multiple Columns

On occasion, you may want certain elements to span multiple columns—for

example, a subheading that will be used to break up sections of a story. To

deal with these elements, the module introduces the column-span element.

Here’s the syntax:

E { column-span: value; }

1. The landscape image is by Flickr user Nicholas_T (http://www.flickr.com/photos/nicholas_t/
   1426623052/) and is used under license.