W3C home > Mailing lists > Public > www-style@w3.org > May 2012

Re: [CSS21] Nested floats and zero-height margin box

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>
Message-ID: <op.weppjkaxbunlto@oyvinds-desktop>
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 GMT

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