Float wrap blindspot

[dorayme]

Can't quite see the analysis of why the last floated div at

<http://members.optushome.com.au/droovies/galleryTemplate/galleryF
loatOddity.html>

is not wrapping to the far left under some not unreasonable
browser widths on a big monitor. If you cannot see what I might
be puzzled by, there is a screenshot (gif'd down to show the wrap
I am finding odd, not for the arty effect!) at

<http://members.optushome.com.au/droovies/galleryTemplate/floatWra
pPuzzle.gif>

I am pretty sure this is "correct behaviour" but am a bit miffed
as to why there is room for it there rather than naturally on the
next line?

It only happens at some browser widths, the effect is not
dependent on it being at the end.

 

[Jonathan N. Little]

Can't quite see the analysis of why the last floated div at

<http://members.optushome.com.au/droovies/galleryTemplate/galleryF
loatOddity.html>

is not wrapping to the far left under some not unreasonable
browser widths on a big monitor. If you cannot see what I might
be puzzled by, there is a screenshot (gif'd down to show the wrap
I am finding odd, not for the arty effect!) at

<http://members.optushome.com.au/droovies/galleryTemplate/floatWra
pPuzzle.gif>

I am pretty sure this is "correct behaviour" but am a bit miffed
as to why there is room for it there rather than naturally on the
next line?

It only happens at some browser widths, the effect is not
dependent on it being at the end.

It's correct, the DIV with the short caption is not as tall so can
"catch" the next floated DIV. If you wish for all to stack nicely and
evenly set all the DIVs to the same height. Pick a value that will
accommodate your longest caption and the DIVs will fall on a grid.

 

[dorayme]

It's correct, the DIV with the short caption is not as tall so can
"catch" the next floated DIV. If you wish for all to stack nicely and
evenly set all the DIVs to the same height. Pick a value that will
accommodate your longest caption and the DIVs will fall on a grid.

Yes, I am sure it is correct as it behaves thus in all my
browsers. And I sort of use your sort of explanations to explain
it to myself (even to the extent of using the phrase "catching")
and yet I am still a tad puzzled. Perhaps I have some distracting
models or inappropriate ones like that floats are a bit like text
that wraps naturally, small words do not catch on big words:

<p style="font-size:150%;">This is a sentence and all the words
are floating left sort of natural like; when room runs out, the
words will wrap and go to the far left again and small words like
<span style="font-size:20%;">this</span> do make any of the
following words (which are as big as nearly all the others catch
on anythiing at all ever...</p>

It is more a problem of understanding in a less intuitive way
than a practical problem for me.

 

[Ben C]

Can't quite see the analysis of why the last floated div at

<http://members.optushome.com.au/droovies/galleryTemplate/galleryF
loatOddity.html>

is not wrapping to the far left under some not unreasonable
browser widths on a big monitor. If you cannot see what I might
be puzzled by, there is a screenshot (gif'd down to show the wrap
I am finding odd, not for the arty effect!) at

<http://members.optushome.com.au/droovies/galleryTemplate/floatWra
pPuzzle.gif>

I am pretty sure this is "correct behaviour" but am a bit miffed
as to why there is room for it there rather than naturally on the
next line?

The relevant part of the CSS2.1 spec is the rather mealy-mouthed 9.5.1
paragraph 2:

"If the current box is left-floating, and there are any left-floating
boxes generated by elements earlier in the source document, then for
each such earlier box, either the left outer edge [p. 100] of the
current box must be to the right of the right outer edge [p. 100] of the
earlier box, or its top must be lower than the bottom of the earlier
box. Analogous rules hold for right-floating boxes."

And paragraph 9:

"A left-floating box must be put as far to the left as possible, a
right-floating box as far to the right as possible. A higher position is
preferred over one that is further to the left/right."

So the situation is, you (or rather the UA) put the left float to the
right of any other left floats, unless there isn't room for it, in which
case you move it down by the smallest amount you can get away with until
there is room for it. You don't worry particularly about getting it all
the way to the left.

 

[Ben C]

Yes, I am sure it is correct as it behaves thus in all my
browsers. And I sort of use your sort of explanations to explain
it to myself (even to the extent of using the phrase "catching")
and yet I am still a tad puzzled. Perhaps I have some distracting
models or inappropriate ones like that floats are a bit like text
that wraps naturally,

I think that is still a good mental model. The difference is, as you see
with this example, when floats have different heights. For inline boxes,
the line height is always made at least big enough for everything on the
line, and the boxes always sit on the lines, so nothing can "catch".

Another thing to be aware of with floats is that their vertical position
is initially determined by the vertical position of the line on which
they originated (or the next line in the case of FF-- this is a known
bug). But if they are moved downwards because they don't fit, they go
"off the rails" of the line boundaries, and occupy a vertical position
to the nearest pixel that gives them the horizontal space they need.

 

[dorayme]

I think that is still a good mental model. The difference is, as you see
with this example, when floats have different heights. For inline boxes,
the line height is always made at least big enough for everything on the
line, and the boxes always sit on the lines, so nothing can "catch".

Another thing to be aware of with floats is that their vertical position
is initially determined by the vertical position of the line on which
they originated (or the next line in the case of FF-- this is a known
bug). But if they are moved downwards because they don't fit, they go
"off the rails" of the line boundaries, and occupy a vertical position
to the nearest pixel that gives them the horizontal space they need.

Thanks Ben, your two posts have straightened up my thinking now,
there seems to be something inhibiting me from diving into the
CSS2.1 specs (right here as icon on my desktop), perhaps in case
I still would not see it and then, of course, would have to shoot
myself. Your little side explanations have helped me.