W3C home > Mailing lists > Public > www-style@w3.org > October 2011

[css3-multicol] Clarification on column-fill

From: Scott Johnson <sjohnson@mozilla.com>
Date: Thu, 27 Oct 2011 22:18:41 -0500
Message-ID: <4EAA1F11.1020207@mozilla.com>
To: www-style@w3.org
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
Received on Friday, 28 October 2011 12:03:36 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:45 GMT