Vertical Alignment of Floats

The CSS2 rules for the vertical alignment of floats
< http://www.w3.org/TR/REC-CSS2/visuren.html#float-position > have a
number of serious problems, which I think should be fixed in the next
revision of CSS.  (Note:  All but rule 7 were essentially the same in
the CSS1 spec.)  Rules 5 and 6 have a technical oversight that requires
a wording change.  This should be an uncontroversial change, and is
described first.  The second change that I propose is substantive, but
I think the current rules cannot be implemented without it without
significant difficulty.  Every existing CSS browser that supports
floats has implemented this rule or some variant of it in addition to
the rules in the spec (and therefore in conflict with them, since the
spec says that floats must be placed as high as possible while
following all the rules in the spec).

---------
CHANGE #1
---------

The motivation for this change is that, technically, the boxacidtest
< http://style.verso.com/boxacidtest/ > is incorrect because the CSS
spec was written in a way that I think the authors didn't mean.  There
is a problem in rules 5 and 6 in the rules for floating element
alignment in the CSS1 and CSS2 specs:
< http://www.w3.org/TR/REC-CSS1#floating-elements >
< http://www.w3.org/TR/REC-CSS2/visuren.html#float-position >

It is rule 6 that causes a problem in the boxacidtest (actually 5 does
too, because of the bang and whimper are in P elements).

For these rules, there really should be a term "non-floating
descendent" which means that it is a descendent through a series of
children none of which are floating.  The problem is that rules 5 and 6
should not apply to children of other floating elements.  However, the
phrasing of "non-floating descendent of the parent" or "non-floating
descendent of an ancestor" (they are equivalent since a float must be
within or below its parent) must be used so the rules can apply
correctly to floats within floats.  Thus rules 5 and 6 should be
(revisions in caps, revised from CSS2 versions):

5. - The outer top of a floating box may not be higher than the outer
top of any block or floated box THAT IS A CHILD OF A NON-FLOATING
DESCENDENT OF AN ANCESTOR OF THE FLOATING BOX WITH WHOSE OUTER TOP WE
ARE NOW CONCERNED generated by an element earlier in the source
document.

6. - The outer top of an element's floating box may not be higher than
the top of any line-box THAT IS A NON-FLOATING DESCENDENT OF AN
ANCESTOR OF THE FLOATING BOX WITH WHOSE OUTER TOP WE ARE NOW CONCERNED
containing a box generated by an element earlier in the source
document.

To explain this change in terms of the boxacidtest, the reason this
rule needs to be changed is that, technically, the top of LI#bar should
be even with the top of the words "the way" (due to rule 6), the top of
the "I grow old" LI should be even with the top of the word "whimper,"
(due to rules 5 and 6) and similar problems for the second line.

---------
CHANGE #2
---------

This discussion of the problem refers to the WSP test page at
< http://www.webstandards.org/ie/shame2/floatclear.html >.

I think the spec should be changed because the current rules are very
difficult to implement.  This is because they force changes in
already-completed layout because a floating element between block-level
elements lines up, according to the current rules, level with the top
of the last line of the previous block-level element.  That is, the
floating elements in the WSP demo should start parallel with the
text-top of the (last line of the) H2.  This is difficult to implement
in a layout algorithm because the previous block has already been
completed (my evidence for this, in addition to logic, is that no
browser has yet implemented it).  The rule I propose below seems to me
to be the "logical" behavior and (roughly?) the behavior of MSIE.  This
should be inserted, I think, between rules 6 and 7 (it doesn't really
matter where -- that's just a logical fit in the rules).

7.  If the float has any prior block-level sibling elements, the top
margin-edge of the float should not be any higher than the bottom
margin-edge of the last block level sibling element to end before the
float.

(Note:  This would allow the margins between the two block level elements
surrounding the float to collapse, but none of the float margins would
collapse.  This is consistent with other parts of the spec.)

David Baron

--------------------------------------------------------------------
L. David Baron         | Freshman, Harvard
dbaron@fas.harvard.edu | < http://www.fas.harvard.edu/~dbaron/ >
--------------------------------------------------------------------

Received on Sunday, 20 December 1998 13:35:00 UTC