Float wrap blindspot

Discussion in 'HTML' started by dorayme, Oct 22, 2006.

  1. dorayme

    dorayme Guest

    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.

    --
    dorayme
    dorayme, Oct 22, 2006
    #1
    1. Advertising

  2. dorayme wrote:
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Oct 22, 2006
    #2
    1. Advertising

  3. dorayme

    dorayme Guest

    In article <57af7$453aecef$40cba7ac$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    > > 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.


    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.

    --
    dorayme
    dorayme, Oct 22, 2006
    #3
  4. dorayme

    Ben C Guest

    On 2006-10-22, dorayme <> wrote:
    > 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, Oct 22, 2006
    #4
  5. dorayme

    Ben C Guest

    On 2006-10-22, dorayme <> wrote:
    > In article <57af7$453aecef$40cba7ac$>,
    > "Jonathan N. Little" <> wrote:

    [snip]
    >> 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,


    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.
    Ben C, Oct 22, 2006
    #5
  6. dorayme

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > On 2006-10-22, dorayme <> wrote:
    > > In article <57af7$453aecef$40cba7ac$>,
    > > "Jonathan N. Little" <> wrote:

    > [snip]
    > >> 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,

    >
    > 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.

    --
    dorayme
    dorayme, Oct 22, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bd
    Replies:
    0
    Views:
    604
  2. Aaron Fude

    To wrap or not to wrap?

    Aaron Fude, May 8, 2008, in forum: Java
    Replies:
    12
    Views:
    680
    Chronic Philharmonic
    May 10, 2008
  3. Carsten Fuchs
    Replies:
    45
    Views:
    1,505
    James Kanze
    Oct 8, 2009
  4. Art Werschulz

    Text::Wrap::wrap difference

    Art Werschulz, Sep 22, 2003, in forum: Perl Misc
    Replies:
    0
    Views:
    215
    Art Werschulz
    Sep 22, 2003
  5. Art Werschulz

    Text::Wrap::wrap difference

    Art Werschulz, Sep 24, 2003, in forum: Perl Misc
    Replies:
    1
    Views:
    230
    Anno Siegel
    Sep 25, 2003
Loading...

Share This Page