HTML and CSS Reference
In-Depth Information
column
Always force a column break.
avoid-page
Avoid a page break.
avoid-column
Avoid a column break.
The
break-inside
property accepts only the following values:
auto
,
avoid
,
avoid-page
, and
avoid-column
.
The following style rule instructs the browser to avoid breaks inside or immediately after
<h2>
headings:
h2 {
break-after: avoid-column;
break-inside: avoid-column;
}
These properties indicate a desired, rather than a guaranteed outcome.
Summary
The Multi-column Layout module provides a simple way to flow content into linked columns in the same way as
a newspaper or magazine. You can specify either the desired width or number of columns, or both. The browser
adjusts the values automatically to achieve what it considers to be the optimal layout. The gap between columns
is adjustable with the
column-gap
property, and you can add an optional vertical rule between columns. Neither
the gap nor the rule affects the overall width of the multi-column element. If the rule is wider than the gap, it runs
under the content in most browsers. But WebKit-based browsers don't display oversized rules.
Child elements can be made to span all columns, breaking the content into independent sections, each
styled as a new row of columns. To prevent browsers from clipping oversized images, give them a maximum
width of
100%
to constrain them within their column box.
The main drawback of multi-column layout is that text flowing from one column to the next often forces the
user to scroll up and down the page, making it difficult to read. However, it's extremely useful when designing for
a known screen size, such as an iPad application. It can also be useful for text-intensive print styles.
The next chapter delves into another new aspect of CSS3—creating color gradients without images.
