Using CSS3 Multi-Column Layout - Beginning CSS3 - page 409

Table 18-3. Miscellaneous Multi-Column Properties

Property Initial Value Description

column-span none Specifies whether an element spans multiple columns. The default is none .

The only other value is all , which makes the element span all columns.

column-fill balance Specifies how the columns are filled. The default is to balance the content

equally between columns, if possible. Setting the value to auto fills the
columns in sequence, so the last column might be shorter.

break-before auto

Specifies how to handle page breaks before the element.

break-after auto Specifies how to handle page breaks after the element.

break-inside auto Specifies what to do about page breaks inside the element.

Spanning Columns
As explained at the beginning of this chapter, child elements can span all rows of a multi-column element. Partial
spans are not permitted. The column-span property accepts the following values:
all This makes the element span all columns of the multi-column element.
none This is the default. The element is restricted to a single column box.

■ Note An early draft of the specification used 1 instead of none . This is no longer supported.

The style rule for the <h2> headings in multicols_2.html looks like this:

h2 {

column-span: all;
background-color: #D2E1E6;
padding: 5px 20px;
margin: 5px 0;
}

This breaks the multi-column element into sections, as shown in Figure 18-2 . The content before and after a
heading is flowed into separate rows of columns. (As noted earlier, Firefox 14 doesn't support column-span .)
Elements too big to fit inside the column box are clipped (see multicols_3.html in Figure 18-3 ). To avoid this
problem, the styles in multicols_4.html set the maximum width of the image to 100% like this:

.figure img {
max-width: 100%;
}

The 100% is relative to the width of the containing column box, so the image is automatically scaled down to
fit, as Figure 18-8 shows.