W3C home > Mailing lists > Public > www-style@w3.org > November 2013

Re: [css-figures] how do float:bottom elements stack?

From: Morten Stenshorne <mstensho@opera.com>
Date: Wed, 20 Nov 2013 09:16:19 +0100
To: Alan Stearns <stearns@adobe.com>
Cc: "www-style\@w3.org" <www-style@w3.org>, howcome@opera.com
Message-ID: <87txf7h4j0.fsf@aeneas.oslo.osa>
Alan Stearns <stearns@adobe.com> writes:

> Section 2.4 has some examples where before clearing is applied,

That has become section 2.5 by now, it seems?

> two float:bottom elements stack at the bottom of a column. The
> examples do not make it clear which gray box corresponds to which
> element, and I don't see any text that describes how the new page
> floats stack.

I think the idea should be that these floats follow rules analogous to
those for regular left/right CSS 2.1 floats.

http://www.w3.org/TR/CSS2/visuren.html#float-position has 9 rules for
float behaviour. Rule 2 and 3 in particular:

      "2. If the current box is left-floating, and there are any
      left-floating boxes generated by elements earlier in the source
      document, then for each such earlier box, either the left outer
      edge of the current box must be to the right of the right outer
      edge of the earlier box, or its top must be lower than the bottom
      of the earlier box. Analogous rules hold for right-floating

      "3. The right outer edge of a left-floating box may not be to the
      right of the left outer edge of any right-floating box that is
      next to it. Analogous rules hold for right-floating elements."

I tried to whip together some exact rules for these floats when we
implemented it in Presto (they were called GCPM floats back then) here:

Rule 9 and 10 in that document:

     "9. The top/bottom margin edge of a top/bottom aligned GCPM float may
     not be above/below the top/bottom edge of the pane in which it is

     "10. A top/bottom aligned GCPM float that has another top/bottom
     GCPM float above/below it may not have its bottom/top margin edge
     below/above the bottom/top edge of the pane in which it is

A better term than "pane" is probably "fragmentainer", BTW.

Note that the spec has evolved since it was implemented and documented
in Presto; in particular, we no longer have complicated values like
"top-corner-next-page". But maybe the rules here can serve as an
inspiration for the spec nevertheless.

> If I have two float:bottom elements:
> <p style="float:bottom;">A</p>
> <p style="float:bottom;">B</p>
> Does the visual order match the source order, or do bottom floats stack
> bottom-up (a bit like right floats stack right-to-left)? In other words,
> does the markup above render as
> A
> B
> Or 
> B
> A

So it should be:

---- Morten Stenshorne, developer, Opera Software ASA ----
------------------ http://www.opera.com/ -----------------
Received on Wednesday, 20 November 2013 08:16:56 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:37 UTC