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

Re: Issue 101 Resolution

From: Alan Gresley <alan@css-class.com>
Date: Sun, 10 Oct 2010 00:09:43 +1100
Message-ID: <4CB06997.9010700@css-class.com>
To: Anton Prowse <prowse@moonhenge.net>
CC: www-style list <www-style@w3.org>, Bert Bos <bert@w3.org>, "Tab Atkins Jr." <jackalmage@gmail.com>
Anton Prowse wrote:
> On 08/10/2010 21:26, Anton Prowse wrote:
>> On 06/10/2010 21:36, Bert Bos wrote:
>>> On Wednesday 06 October 2010 01:48:17 Tab Atkins Jr. wrote:
>>>> This email is an attempt to resolve Issue 101
>>>> (http://wiki.csswg.org/spec/css2.1#issue-101)
>>>> Suggested Change
>>>> ================
>>> Why do you propose to change the spec? It's just an implementation bug,
>>> isn't it?
>> Well, the behaviour doesn't match the spec, sure.
>> However, I remain unconvinced that browsers' current behaviour is
>> undesirable. To me, it seems rather logical. As I've mentioned a couple
>> of times already, the issue here is containing blocks and overflow:

I agree but for different reasons. I see it as a set of rules that are 
one sided (the nature of floats), either left or right.

>> Firstly, browsers treat all floats as if their overflow from their
>> containing block is clipped (ie ignored for layout purposes). This is
>> enough to "explain" the test cases for Rule 3, and some of the test
>> cases for Rule 7.

The horizontal overflow of a float from it's containing block is not 
clipped. That can only happen if the containing block has overflow: 
hidden. Is the overflow of this float ignored?

<!DOCTYPE html>
<div style="width:300px;border:5px solid blue;">
  <div style="float: left; width:400px; height:150px; background: 
<div style="background: orange;">This text flows around the float</div>

The reason that rule 3 is being ignored in some cases and in some 
browsers is due to rule 1. I believe that rule 3 was intended to deal 
with simple cases where both floats (left and right) interacted in the 
same containing block. Do you understand the intent of this test 
series [1]?

Sometime in early 2008 I noticed that Gecko would allow the left outer 
edges (with or without margin-left) of right floated boxes to overflow 
the body to the left and become hidden. This caused me to ask this 
question on this list in which dbaron replied [2] (the first part). 
WebKit then changed it bug behavior and then IE8 final followed. It 
was only last year that I realized that is was about rule 1 being 
ignored by all other browsers apart from Gecko.

>> This behaviour is reasonable because overflow is impotent in all other
>> ways in CSS21, so it's anomalous that it isn't impotent for floats.

In which way are you talking about overflow. I do not understand what 
you mean by impotent (definition: utterly unable to do something or 
obsolete, without restraint).

> I'm excepting /vertical/ overflow for floats here, obviously.  The 
> non-impotence of vertical overflow of floats is a unique, integral and 
> justifiable part of float behaviour; it's also rather different from 
> horizontal overflow of floats and from any overflow of other boxes in 
> that these types of overflow are generally "accidental" (which is why 
> impotence is desirable) whereas vertical overflow of floats is "expected".

As above with your use of non-impotence. I see not much difference 
between horizontal overflow and horizontal overflow. The only 
difference is due to the direction of block progression. Overflow in 
ttb block progression typically overflows downwards.

> To make a case for non-impotence of horizontal overflow for floats, you 
> would need to present typographical justification for why the second 
> float should move downwards in this case...
> <!DOCTYPE html>
> <div style="float:left; width:100px; height:100px; 
> background:yellow"></div>
> <div style="margin-left:120px; width:150px; height:200px; 
> background:green">
>     <div style="float:left">supercalifragilisticexpialidocious</div>
> </div>

Should that not be this?

<!DOCTYPE html>
<div style="float:left; width:100px; height:100px; 
<div style="margin-left:120px; width:150px; height:200px; 
     <div style="float:right">supercalifragilisticexpialidocious</div>

> ...whilst the text doesn't move downwards in this one:
> <!DOCTYPE html>
> <div style="float:left; width:100px; height:100px; 
> background:yellow"></div>
> <div style="margin-left:120px; width:150px; height:200px; 
> background:green">
>     supercalifragilisticexpialidocious
> </div>

How could the text move downwards. The block with the text has it's 
margin-left sitting on the left edge of it's initial containing block, 
one which it shared with the float.

> Cheers,
> Anton Prowse
> http://dev.moonhenge.net

Anton, what do you think should happen here (view in Gecko).


Should the reverse happen in ltr (overlapping floats)?

2. <http://lists.w3.org/Archives/Public/www-style/2008Mar/0423.html>

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Saturday, 9 October 2010 13:10:15 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:34:43 UTC