- From: Øyvind Stenhaug <oyvinds@opera.com>
- Date: Tue, 22 May 2012 15:39:10 +0200
- To: "W3C www-style mailing list" <www-style@w3.org>
On Mon, 21 May 2012 19:59:21 +0200, Anton Prowse <prowse@moonhenge.net> wrote: > On 21/05/2012 16:09, Øyvind Stenhaug wrote: >> <!DOCTYPE html> >> <style> >> body > div { >> width: 150px; >> } >> div > div { >> width: 100px; >> height: 100px; >> } >> .left { >> background: blue; >> float: left; >> } >> .right { >> background: teal; >> float: right; >> margin-bottom: -150px; >> } >> </style> >> <div> >> <div class="left"></div> >> <div class="right"></div> >> </div> >> >> These squares don't overlap (in Gecko/Presto/Webkit, at least, didn't >> try IE). That doesn't seem very obvious, since it seems to suggest >> different "next to"-conditions than the ones used for line boxes. Of >> course, it would be a bit weird for them to overlap since it would >> almost be like placing the later element's box "above" the earlier. (But >> not really - the vertical position would be equal, not above.) > > Hmm, negative margins. OK, this has some parallels with > https://www.w3.org/Bugs/Public/show_bug.cgi?id=15389 . Well, it doesn't really have to be a margin. That declaration could be replaced with "height: 0", and e.g. a div child could be added to see where .right shows up. Not quite so obviously different from the line box stuff, but still shows that the floats can be "next to" each other even if only the edges have a common vertical position (unlike conditions c and d for the line box case). Something like this, perhaps: === 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 and has been generated by an element earlier in the document. Analogous rules hold for right-floating elements. A floating box A is next to an earlier floating box B when there exists a vertical position that satisfies all of these three conditions: (a) at or below the top margin edges of both A and B, (b) at or above the bottom margin edge of A, and (c) above the bottom margin edge of B. === -- Øyvind Stenhaug Core Norway, Opera Software ASA
Received on Tuesday, 22 May 2012 13:40:09 UTC