Wrapping divs

Discussion in 'HTML' started by Nik Coughin, Feb 28, 2004.

  1. Nik Coughin

    Nik Coughin Guest

    I have two divs that live inside another div on my page.

    The two divs are:

    1) A collection of thumbnail images which is float: left
    2) A column which is float: right.

    Neither of them have any other positioning.

    Legend: t=thumb, c=column.

    This is how it looks when there is enough room horizontally for both the
    thumbs and the column:

    t t t c

    When the number of thumbs gets high enough the right hand column moves down
    underneath them:

    t t t t
    c

    How can I make it so that the thumbs wrap onto the next line instead,
    leaving the right hand column where it is:

    t t t c
    t
     
    Nik Coughin, Feb 28, 2004
    #1
    1. Advertising

  2. Nik Coughin

    Els Guest

    Nik Coughin wrote:
    > I have two divs that live inside another div on my page.
    >
    > The two divs are:
    >
    > 1) A collection of thumbnail images which is float: left
    > 2) A column which is float: right.
    >
    > Neither of them have any other positioning.
    >
    > Legend: t=thumb, c=column.
    >
    > This is how it looks when there is enough room horizontally for both the
    > thumbs and the column:
    >
    > t t t c
    >
    > When the number of thumbs gets high enough the right hand column moves down
    > underneath them:
    >
    > t t t t
    > c
    >
    > How can I make it so that the thumbs wrap onto the next line instead,
    > leaving the right hand column where it is:
    >
    > t t t c
    > t


    By giving the thumbs div a width?

    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Feb 28, 2004
    #2
    1. Advertising

  3. Nik Coughin

    Paul Furman Guest

    Nik Coughin wrote:
    > I have two divs that live inside another div on my page.
    >
    > The two divs are:
    >
    > 1) A collection of thumbnail images which is float: left
    > 2) A column which is float: right.
    >
    > Neither of them have any other positioning.
    >
    > Legend: t=thumb, c=column.
    >
    > This is how it looks when there is enough room horizontally for both the
    > thumbs and the column:
    >
    > t t t c
    >
    > When the number of thumbs gets high enough the right hand column moves down
    > underneath them:
    >
    > t t t t
    > c
    >
    > How can I make it so that the thumbs wrap onto the next line instead,
    > leaving the right hand column where it is:
    >
    > t t t c
    > t



    Good question. I've got something similar happening here:
    http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=web-ref.php
    but only in IE, Mozilla handles it fine. IE sometimes wraps the green
    content box down below my float left menu (sometimes not).

    Here's a simplified version:
    http://www.edgehill.net/html/css/3.htm
    Try resizing in IE to see the problem.

    I use float: left to put my menu on the left with a set width. Then I
    gave the right side a matching left margin to keep it from overlapping
    the left menu. You might try that.

    I can fix this simple one a couple of ways but not the real page. One
    fix is to float: right then clear both for the lower menu. Another fix
    is to make the lower menu wider than the two columns above. I used a
    max-width (that can shrink) and that needs an IE workaround so maybe
    that's the source of my problems where IE "sometimes" works.
     
    Paul Furman, Feb 28, 2004
    #3
  4. Nik Coughin

    Nik Coughin Guest

    Paul Furman wrote:
    > Nik Coughin wrote:
    >> How can I make it so that the thumbs wrap onto the next line instead,
    >> leaving the right hand column where it is:
    >>
    >> t t t c
    >> t

    >
    >
    > Good question. I've got something similar happening here:
    > http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=web-ref.php
    > but only in IE, Mozilla handles it fine. IE sometimes wraps the green
    > content box down below my float left menu (sometimes not).


    I'm going to get a slap on the hand for this, but:

    <table width="100%">
    <tr>
    <td> Thumbs DIV goes here </td>
    </tr>
    <tr>
    <td> Right column DIV goes here</td>
    </tr>
    </table>

    Bad table. Down boy.
     
    Nik Coughin, Mar 1, 2004
    #4
  5. Nik Coughin

    Nik Coughin Guest

    Els wrote:
    > Nik Coughin wrote:
    >> I have two divs that live inside another div on my page.
    >>
    >> The two divs are:
    >>
    >> 1) A collection of thumbnail images which is float: left
    >> 2) A column which is float: right.
    >>
    >> Neither of them have any other positioning.
    >>
    >> Legend: t=thumb, c=column.
    >>
    >> This is how it looks when there is enough room horizontally for both
    >> the thumbs and the column:
    >>
    >> t t t c
    >>
    >> When the number of thumbs gets high enough the right hand column
    >> moves down underneath them:
    >>
    >> t t t t
    >> c
    >>
    >> How can I make it so that the thumbs wrap onto the next line instead,
    >> leaving the right hand column where it is:
    >>
    >> t t t c
    >> t

    >
    > By giving the thumbs div a width?


    The column is fixed width, by necessity (it contains images of a fixed
    size). I can't therefore accurately give the thumbs div a percentage width,
    and a pixel width for it would break my flexible layout. I want as many
    thumbs as will fit to go into that space.
     
    Nik Coughin, Mar 1, 2004
    #5
  6. Nik Coughin

    Els Guest

    Nik Coughin wrote:
    > Els wrote:
    >
    >>Nik Coughin wrote:
    >>
    >>>I have two divs that live inside another div on my page.
    >>>
    >>>The two divs are:
    >>>
    >>>1) A collection of thumbnail images which is float: left
    >>>2) A column which is float: right.
    >>>
    >>>Neither of them have any other positioning.
    >>>
    >>>Legend: t=thumb, c=column.
    >>>
    >>>This is how it looks when there is enough room horizontally for both
    >>>the thumbs and the column:
    >>>
    >>>t t t c
    >>>
    >>>When the number of thumbs gets high enough the right hand column
    >>>moves down underneath them:
    >>>
    >>>t t t t
    >>>c
    >>>
    >>>How can I make it so that the thumbs wrap onto the next line instead,
    >>>leaving the right hand column where it is:
    >>>
    >>>t t t c
    >>>t

    >>
    >>By giving the thumbs div a width?

    >
    > The column is fixed width, by necessity (it contains images of a fixed
    > size). I can't therefore accurately give the thumbs div a percentage width,
    > and a pixel width for it would break my flexible layout. I want as many
    > thumbs as will fit to go into that space.


    So you have in mirrow view what lot's of sites have, which
    makes me think:
    column fixed width float:right, thumbs div
    margin-right:width of column.
    Doesn't work?



    --
    Els

    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Mar 1, 2004
    #6
  7. Nik Coughin

    Paul Furman Guest

    Nik Coughin wrote:

    > Paul Furman wrote:
    >>IE sometimes wraps the green
    >>content box down below my float left menu (sometimes not).

    >
    >
    > I'm going to get a slap on the hand for this, but:
    >
    > <table width="100%">
    > <tr>
    > <td> Thumbs DIV goes here </td>
    > </tr>
    > <tr>
    > <td> Right column DIV goes here</td>
    > </tr>
    > </table>
    >
    > Bad table. Down boy.


    I'm tempted. I had it working before though. The little test page, I
    found at least three ways to make it function properly but the bigger
    real pages are just refusing to behave.
     
    Paul Furman, Mar 1, 2004
    #7
    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. S. Justin Gengo

    Re: DIVs and overflow scroll bars

    S. Justin Gengo, Jul 18, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    421
    S. Justin Gengo
    Jul 18, 2003
  2. Jeff Bowman

    Way to stop DIVs from wrapping?

    Jeff Bowman, Apr 14, 2005, in forum: HTML
    Replies:
    5
    Views:
    14,851
    Jeff Bowman
    Apr 16, 2005
  3. rich
    Replies:
    0
    Views:
    726
  4. Matt Walker

    floating divs wrapping differently

    Matt Walker, Apr 2, 2007, in forum: HTML
    Replies:
    1
    Views:
    523
    Ben C
    Apr 3, 2007
  5. maya
    Replies:
    4
    Views:
    243
Loading...

Share This Page