Multiple Columns 81
If you added real values, you would have something like this:
div {
column-rule-color: silver;
column-rule-style: double;
column-rule-width: 0.3em;
}
You can then use the column-rule shorthand to set all three subproper-
ties at once:
div { column-rule: 0.3em double silver; }
Let’s see the column-gap and column-rule properties in action. The follow-
ing example combines them with column-count:
.columns {
column-count: 3;
column-gap: 2em;
column-rule: 0.3em double silver;
}
This example splits the element’s children into three columns, each with
a gap of 2em between the columns, and a 0.3em rule. The thickness of the
rule has no effect on layout—no matter how thick you make the rule, the
gap will always stay the same width. You can see the result of this example
in Figure 7-6.
Figure 7-6: Inter-column gaps and rules
Containing Elements Within Columns
So far in these examples I’ve only used blocks of text, which flow neatly into
columns. But what happens with larger elements, like images, that could
have a width greater than the column that contains them? Let’s see what
happens when I add an image that’s wider than a single column inside a
column layout, using the img element. The result is displayed in Figure 7-7.
