W3C home > Mailing lists > Public > www-style@w3.org > February 2000

Re: Position of pending floats

From: Ian Hickson <py8ieh@bath.ac.uk>
Date: Fri, 4 Feb 2000 01:13:36 +0000 (GMT)
To: Allan Odgaard <Duff@diku.dk>
cc: www-style <WWW-Style@w3.org>
Message-ID: <Pine.GSO.4.04.10002040108470.9070-100000@mary.bath.ac.uk>
On Mon, 31 Jan 2000, Allan Odgaard wrote:

> If I have a lot of float boxes, so wide that only one can fit the
> viewport at a time, they'll be queued and appear (one by one) as
> soon as the horizontal space allows it.
> 
> Now should the top position of each new float match that of the
> current line or should it be moved up a few pixels to match the
> bottom of the last float box?

They should all be moved as high as possible. From CSS2, 9.5.1:

#  5. The outer top of a floating box may not be higher than the outer
#     top of any block or floated box generated by an element earlier
#     in the source document.
#
#  6. The outer top of an element's floating box may not be higher than
#     the top of any line-box containing a box generated by an element
#     earlier in the source document.
#
#  8. A floating box must be placed as high as possible.

 
> An example may help understand my dilemma:
> 
>    <Img Width=200 Align=Left ...>
>    <Img Width=200 Align=Left ...>
>    <Img Width=200 Align=Left ...>
>    <Img Width=200 Align=Left ...>
>    <P>This text will float to the right of all the images...</P>
> 
> Imagine the height of the images are one third of a line, and below
> I make three ascii lines appear as one 'rendered line': (so an image
> will be two ascii lines and a word will be three)
> 
>    [ 1 ] This    \
>    [   ] This     |- first line
>          This    /
>    [ 2 ] text    \
>    [   ] text     |- second line
>          text    /
>    [ 3 ] will    \
>    [   ] will     |- third line
>          will    /
> 
> But IMHO a more correct rendering would be:
> 
>    [ 1 ] This    \
>    [   ] This     |- first line
>    [ 2 ] This    /
>    [   ] text    \
>    [ 3 ] text     |- second line
>    [   ] text    /
>    [ 4 ] will    \
>    [   ] will     |- third line
>          will    /
> 

Your "more correct" rendering is correct, since the floats must be as
high as possible without getting higher than the first <img> element.
The subsequent text, although it appears "before" the last float, is
actually _after_ the floats in the document flow.

I hope that is clear... :-/
-- 
Ian Hickson                            ("`-''-/").___..--''"`-._   
http://www.bath.ac.uk/%7Epy8ieh/        `6_ 6  )   `-.  (     ).`-.__.`)
                                        (_Y_.)'  ._   )  `._ `. ``-..-' fL
Member, Mozilla Quality Assurance     _..`--'_..-_/  /--'_.' ,'
Browser Standards Compliance Team    (il).-''  (li).'  ((!.-'    
Received on Thursday, 3 February 2000 20:13:40 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:03 GMT