W3C home > Mailing lists > Public > www-style@w3.org > March 2011

Re: [CSS21] Issue 192 - floats and shortened line boxes

From: Alan Gresley <alan@css-class.com>
Date: Fri, 18 Mar 2011 22:36:52 +1100
Message-ID: <4D8343D4.5030505@css-class.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
CC: Anton Prowse <prowse@moonhenge.net>, www-style@w3.org, "L. David Baron" <dbaron@dbaron.org>
On 18/03/2011 2:49 AM, Tab Atkins Jr. wrote:
> On Thu, Mar 17, 2011 at 2:47 AM, Alan Gresley<alan@css-class.com>  wrote:
>> On 17/03/2011 1:08 PM, Anton Prowse wrote:
>> [snip]
>>> David and I both used the logic of Rules 6 and 8 in 9.5.1 to conclude
>>> that the content before the float is indeed always reflowed into the
>>> same line on the other side of the float; it's never broken into
>>> multiple line boxes.
>>
>> Anton, you have a mental model, David has a mental model, I have a mental
>> model. If I see this.
>>
>> x x x x x x
>> | Float | a
>> | Float | b
>> | Float |
>> car
>>
>> The line boxes that have 'a' and 'b' are what I believe are multiple line
>> boxes.
>
> If the "a b" is supposed to be content that preceded the float in
> source order, then the situation you present can never arise.  All
> browsers agree that the rendering would instead be:
>
> x x x x x x
> a b car
> | Float |
> | Float |
> | Float |
>
> (That is, the float is pushed down to the next line instead, and
> following content may be reflowed into the space left on the line that
> the float vacated.)
>
> ~TJ


Hello tab,

I meant visually proceeding when the inline jumps above the float (I 
don't know the name for this behavior) and the other inline are 
reflowed. This is what I believe this thread is about. Please correct me 
if I am wrong. I believe we are talking about what happens with this 
test case and what happen when you narrow the viewport.


<!DOCTYPE html>
<style type="text/css">
span {display: inline-block; width: 98px; height: 24px; border: 1px 
solid red;}
div {float: left; width: 200px; height: 120px;background: blue;}
.long { width: 150px; background: lime;}
</style>
<span></span><span></span><span></span><div></div><span></span><span></span><span></span><span 
class="long"></span>


First we see this.

   [-- FLOAT --] inline inline inline inline inline inline long-inline
   [-- FLOAT --]
   [-- FLOAT --]
   [-- FLOAT --]


Later we see this.

   [-- FLOAT --]  inline inline inline
   [-- FLOAT --]  inline inline inline
   [-- FLOAT --]  long-inline
   [-- FLOAT --]


Finally we see this.

   inline inline inline
   [-- FLOAT --] inline
   [-- FLOAT --] inline
   [-- FLOAT --] inline
   [-- FLOAT --]
   long-inline


Note how the three 'inlines' appear visually above the float (Note: 
earlier versions of Gecko 1.9 had a bug with this) and the other inline 
are reflowed.


1. <http://lists.w3.org/Archives/Public/www-style/2009Oct/0027.html>



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Friday, 18 March 2011 11:37:28 GMT

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