I'm looking for some clarification on the column-fill property, as
specified here:
http://dev.w3.org/csswg/css3-multicol/#cf
As I understand it, if we have a multi-column element with max height
restricted to ~7em (i.e. it can fit up to 7 lines of text, plus
margins/padding), with an inner block element, similar to the following:
<div class="col">
... text content ...
</div>
with the following style:
..col {
column-count: 2;
max-height: 7em;
column-fill: auto;
}
We would have something like the following as a result:
____________________ ____________________ ---
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | ~6em
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | |
| ~~~~~~~~~~~~~~~~~~~~ | | |
-------------------- --------------------- ---
But, if we have:
..col {
column -count: 2;
max-height: 7em;
column-fill: balance;
}
Then, we'll end up with something more along the lines of this:
____________________ ____________________ ---
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | |
| ~~~~~~~~~~~~~~~~~~~~ | ~~~~~~~~~~~~~~~~~~~~ | ~7em
| ~~~~~~~~~~~~~~~~~~~~ | | |
| ~~~~~~~~~~~~~~~~~~~~ | | |
| ~~~~~~~~~~~~~~~~~~~~ | | |
-------------------- --------------------- ---
In the former example, the first column is filled completely to its
max-height, which happens to be ~7em. (I assumed that 7 lines of text
would be able to fit, but this will vary depending on how the width is
calculated.)
In the latter example, the height of the entire column set is actually
less than 7 lines, in order to better balance the columns, so the full
allowable height of 7em isn't actually used.
Does this seem correct? The spec seems a bit vague in this regard, and,
in my opinion, it would be useful to clarify this with an example of
some kind.
--
~Scott