Re: Position of pending floats

> Re: Position of pending floats
> 
> From: Ian Hickson (py8ieh@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 
The current line always (provided they are inline floats (that is to say
block boxes participating in the inline formatting context)).
> > or should it be moved up a few pixels to match the
> > bottom of the last float box?
No.
> 
> 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.
The rules are hopeless - it says elsewhere that a float must be aligned
with the top of the line box from which they are displaced.
> > 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... :-/
Clear but wrong.

Since inline floats (yes, there is a difference) are aligned with the
top of the line box (failing which the next line box down, and the next,
ad infinitum) from which they were displaced, a float must occupy as
many lines as it spans part of; for example, a 12px float will
effectively have a 88 pixel bottom margin if placed in a 100 pixel line
box.

The first example is correct. It is not possible to get more than one
inline float to stack vertically in a line box - to do this, you need to
have them inside a containing SPAN.