Stopping divs floating down

Discussion in 'HTML' started by Tim Streater, Feb 7, 2011.

  1. Tim Streater

    Tim Streater Guest

    I have a container <div>, within which I want to have several divs (all
    same size) next to each other. The overall height of the container and
    content divs I adjust with JavaSCript as the user resizes the window.

    As the user clicks around, I want to add more divs, with a horizontal
    scroll-bar appearing when the window is too narrow to add another. The
    user can then scroll right to see the latest addition, or make the
    window wider. This looks just like the Next (and now OS X) file select
    dialogue pane. I'm using float: left on all these internal <div>s.

    Trouble is, instead of a horizontal scroll-bar appearing, the next <div>
    floats underneath all those already there, and a *vertical* scroll bar
    appears. How can I prevent this from happening?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Feb 7, 2011
    #1
    1. Advertising

  2. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > I have a container <div>, within which I want to have several divs (all
    > same size) next to each other. The overall height of the container and
    > content divs I adjust with JavaSCript as the user resizes the window.
    >
    > As the user clicks around, I want to add more divs, with a horizontal
    > scroll-bar appearing when the window is too narrow to add another. The
    > user can then scroll right to see the latest addition, or make the
    > window wider. This looks just like the Next (and now OS X) file select
    > dialogue pane. I'm using float: left on all these internal <div>s.
    >
    > Trouble is, instead of a horizontal scroll-bar appearing, the next <div>
    > floats underneath all those already there, and a *vertical* scroll bar
    > appears. How can I prevent this from happening?


    Just off the top of my head: only by giving a width or min-width
    to the container of the floats that prevents them wrapping till
    the width runs out, you get scrollbars instead. You will have to
    do this dynamically with your code I guess.

    <http://dorayme.netweaver.com.au/preventFloatDrop.html>

    except that you will need to adjust the css values dynamically.

    --
    dorayme
     
    dorayme, Feb 8, 2011
    #2
    1. Advertising

  3. Tim Streater

    BootNic Guest

    On Mon, 07 Feb 2011 23:46:07 +0000
    Tim Streater <> wrote:

    > I have a container <div>, within which I want to have several
    > divs (all same size) next to each other. The overall height of
    > the container and content divs I adjust with JavaSCript as the
    > user resizes the window.
    >
    > As the user clicks around, I want to add more divs, with a
    > horizontal scroll-bar appearing when the window is too narrow to
    > add another. The user can then scroll right to see the latest
    > addition, or make the window wider. This looks just like the Next
    > (and now OS X) file select dialogue pane. I'm using float: left
    > on all these internal <div>s.
    >
    > Trouble is, instead of a horizontal scroll-bar appearing, the
    > next <div> floats underneath all those already there, and a
    > *vertical* scroll bar appears. How can I prevent this from
    > happening?


    Don't use float.

    • for the parent div: white-space:nowrap;

    • internal divs: display:inline-block; white-space:normal;

    for older versions of IE:

    • internal divs: display:inline; zoom:1; which would make the
    divs behave as inline-block;

    Don't see a url, not sure if js would be required or not.


    --
    BootNic http://bootnic.bounceme.net Mon Feb 7, 2011 08:17 pm
    Man who fight with wife all day get no piece at night.
    *Ancient Chinese Proverbs*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.10 (GNU/Linux)

    iEYEARECAAYFAk1QmcgACgkQmo2774GZ7qmWEQCg+xvPTkFJSB4CS4lPavfRX0OU
    KrAAn1cmjrOsA8L15iA3FtldpFhJT6Qy
    =JRW7
    -----END PGP SIGNATURE-----
     
    BootNic, Feb 8, 2011
    #3
  4. Tim Streater

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article
    > <>,
    > Tim Streater <> wrote:
    >
    > > I have a container <div>, within which I want to have several divs (all
    > > same size) next to each other. The overall height of the container and
    > > content divs I adjust with JavaSCript as the user resizes the window.
    > >
    > > As the user clicks around, I want to add more divs, with a horizontal
    > > scroll-bar appearing when the window is too narrow to add another. The
    > > user can then scroll right to see the latest addition, or make the
    > > window wider. This looks just like the Next (and now OS X) file select
    > > dialogue pane. I'm using float: left on all these internal <div>s.
    > >
    > > Trouble is, instead of a horizontal scroll-bar appearing, the next <div>
    > > floats underneath all those already there, and a *vertical* scroll bar
    > > appears. How can I prevent this from happening?

    >
    > Just off the top of my head: only by giving a width or min-width
    > to the container of the floats that prevents them wrapping till
    > the width runs out, you get scrollbars instead. You will have to
    > do this dynamically with your code I guess.
    >
    > <http://dorayme.netweaver.com.au/preventFloatDrop.html>
    >
    > except that you will need to adjust the css values dynamically.


    Thanks, that's obviously a working example. I'll have to morph it
    towards what I already have (which does the dynamic re-width-ing of the
    container as more divs get added) and see why it fails to scroll
    horizontally.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Feb 8, 2011
    #4
  5. Tim Streater

    Tim Streater Guest

    In article <-september.org>,
    BootNic <> wrote:

    > On Mon, 07 Feb 2011 23:46:07 +0000
    > Tim Streater <> wrote:
    >
    > > I have a container <div>, within which I want to have several
    > > divs (all same size) next to each other. The overall height of
    > > the container and content divs I adjust with JavaSCript as the
    > > user resizes the window.
    > >
    > > As the user clicks around, I want to add more divs, with a
    > > horizontal scroll-bar appearing when the window is too narrow to
    > > add another. The user can then scroll right to see the latest
    > > addition, or make the window wider. This looks just like the Next
    > > (and now OS X) file select dialogue pane. I'm using float: left
    > > on all these internal <div>s.
    > >
    > > Trouble is, instead of a horizontal scroll-bar appearing, the
    > > next <div> floats underneath all those already there, and a
    > > *vertical* scroll bar appears. How can I prevent this from
    > > happening?

    >
    > Don't use float.
    >
    > • for the parent div: white-space:nowrap;
    >
    > • internal divs: display:inline-block; white-space:normal;


    It still wraps, albeit all the divs at once instead of one at a time :)

    It must be something to do with the way I'm setting the width.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Feb 8, 2011
    #5
  6. Tim Streater

    BootNic Guest

    On Tue, 08 Feb 2011 12:14:32 +0000
    Tim Streater <> wrote:

    > In article <-september.org>,
    > BootNic <> wrote:


    [snip]

    >> Don't use float.
    >>
    >> • for the parent div: white-space:nowrap;
    >>
    >> • internal divs: display:inline-block; white-space:normal;

    >
    > It still wraps, albeit all the divs at once instead of one at a
    > time :)
    >
    > It must be something to do with the way I'm setting the width.


    Without seeing an example, perhaps be unknown issues.


    --
    BootNic http://bootnic.bounceme.net Tue Feb 8, 2011 10:29 am
    They always say time changes things, but you actually have to change them
    yourself.
    *Andy Warhol*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.10 (GNU/Linux)

    iEYEARECAAYFAk1RYWsACgkQmo2774GZ7qk40wCeJSrdG5p2xtkwObc//6zHd84q
    LT0AoLDfkdjT56jrvVohRzSW/9KSCdMW
    =/qv/
    -----END PGP SIGNATURE-----
     
    BootNic, Feb 8, 2011
    #6
  7. Tim Streater

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > In article
    > <>,
    > Tim Streater <> wrote:
    >
    > > I have a container <div>, within which I want to have several divs (all
    > > same size) next to each other. The overall height of the container and
    > > content divs I adjust with JavaSCript as the user resizes the window.
    > >
    > > As the user clicks around, I want to add more divs, with a horizontal
    > > scroll-bar appearing when the window is too narrow to add another. The
    > > user can then scroll right to see the latest addition, or make the
    > > window wider. This looks just like the Next (and now OS X) file select
    > > dialogue pane. I'm using float: left on all these internal <div>s.
    > >
    > > Trouble is, instead of a horizontal scroll-bar appearing, the next <div>
    > > floats underneath all those already there, and a *vertical* scroll bar
    > > appears. How can I prevent this from happening?

    >
    > Just off the top of my head: only by giving a width or min-width
    > to the container of the floats that prevents them wrapping till
    > the width runs out, you get scrollbars instead. You will have to
    > do this dynamically with your code I guess.
    >
    > <http://dorayme.netweaver.com.au/preventFloatDrop.html>
    >
    > except that you will need to adjust the css values dynamically.


    OK. I confess. The info I gave above was incomplete. Mind you, when
    folks post with a question, it generally *is* incomplete. The trick is
    knowing which bits are important and which are not.

    Pretty soon after taking your example above and adding the <div> to the
    left of the whole works, I quickly saw that what was happening was that
    the container div was just shifting below that when it needed to. So, I
    added a new <div> around the whole lot. This works better, but there's a
    residual problem. If you look here:

    <http://www.clothears.org.uk/div-test.html>

    you'll see where I'm at. The scrolling behaviour in the third green div
    is exactly what I want, but if the window is made narrower, I want the
    scroll bar underneath all the green divs to spring into action, so the
    green divs scroll back and forth horizontally as a unit but the pink div
    stays put and is always visible. What's happening at the moment is that
    when there is insufficient width a scroll bar appears at the bottom of
    the window instead. I can't see how to change that - what am I missing?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Feb 8, 2011
    #7
  8. Tim Streater

    richard Guest

    On Mon, 07 Feb 2011 23:46:07 +0000, Tim Streater wrote:

    > I have a container <div>, within which I want to have several divs (all
    > same size) next to each other. The overall height of the container and
    > content divs I adjust with JavaSCript as the user resizes the window.
    >
    > As the user clicks around, I want to add more divs, with a horizontal
    > scroll-bar appearing when the window is too narrow to add another. The
    > user can then scroll right to see the latest addition, or make the
    > window wider. This looks just like the Next (and now OS X) file select
    > dialogue pane. I'm using float: left on all these internal <div>s.
    >
    > Trouble is, instead of a horizontal scroll-bar appearing, the next <div>
    > floats underneath all those already there, and a *vertical* scroll bar
    > appears. How can I prevent this from happening?


    For a horizontal scrollbar I use two div.
    <div style="width:200px; height:200px; overflow:auto;">
    <div style="width:600px; height:100px;">content</div>
    </div>
     
    richard, Feb 9, 2011
    #8
  9. In article <>, on
    Tue, 08 Feb 2011 21:15:18 +0000, Tim Streater wrote:

    | In article <>,
    | dorayme <> wrote:
    |
    | > In article
    | > <>,
    | > Tim Streater <> wrote:
    | >
    | > > I have a container <div>, within which I want to have several divs (all
    | > > same size) next to each other. The overall height of the container and
    | > > content divs I adjust with JavaSCript as the user resizes the window.
    | > >
    | > > As the user clicks around, I want to add more divs, with a horizontal
    | > > scroll-bar appearing when the window is too narrow to add another. The
    | > > user can then scroll right to see the latest addition, or make the
    | > > window wider. This looks just like the Next (and now OS X) file select
    | > > dialogue pane. I'm using float: left on all these internal <div>s.
    | > >
    | > > Trouble is, instead of a horizontal scroll-bar appearing, the next <div>
    | > > floats underneath all those already there, and a *vertical* scroll bar
    | > > appears. How can I prevent this from happening?
    | >
    | > Just off the top of my head: only by giving a width or min-width
    | > to the container of the floats that prevents them wrapping till
    | > the width runs out, you get scrollbars instead. You will have to
    | > do this dynamically with your code I guess.
    | >
    | > <http://dorayme.netweaver.com.au/preventFloatDrop.html>
    | >
    | > except that you will need to adjust the css values dynamically.
    |
    | OK. I confess. The info I gave above was incomplete. Mind you, when
    | folks post with a question, it generally *is* incomplete. The trick is
    | knowing which bits are important and which are not.
    |
    | Pretty soon after taking your example above and adding the <div> to the
    | left of the whole works, I quickly saw that what was happening was that
    | the container div was just shifting below that when it needed to. So, I
    | added a new <div> around the whole lot. This works better, but there's a
    | residual problem. If you look here:
    |
    | <http://www.clothears.org.uk/div-test.html>
    |
    | you'll see where I'm at. The scrolling behaviour in the third green div
    | is exactly what I want, but if the window is made narrower, I want the
    | scroll bar underneath all the green divs to spring into action, so the
    | green divs scroll back and forth horizontally as a unit but the pink div
    | stays put and is always visible. What's happening at the moment is that
    | when there is insufficient width a scroll bar appears at the bottom of
    | the window instead. I can't see how to change that - what am I missing?

    Your div-test page is somehow horribly broken. In two diffferent browsers
    (IE 7 and Firefox 3.6.13) I dont *see* any green divs at all!
    --
    David Postill
    Dance your Life - Biodanza in Holland - <http://www.danceyourlife.eu>
     
    David Postill, Feb 9, 2011
    #9
  10. Tim Streater

    Tim Streater Guest

    In article <iiu477$h94$-september.org>,
    David Postill <> wrote:

    > Your div-test page is somehow horribly broken. In two diffferent browsers
    > (IE 7 and Firefox 3.6.13) I dont *see* any green divs at all!


    I think you may have caught it while I was testing something. I undid
    that PDQ.

    But now the server seems to be down.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Feb 9, 2011
    #10
  11. Tim Streater

    Tim Streater Guest

    In article <-september.org>,
    BootNic <> wrote:

    > On Mon, 07 Feb 2011 23:46:07 +0000
    > Tim Streater <> wrote:
    >
    > > I have a container <div>, within which I want to have several
    > > divs (all same size) next to each other. The overall height of
    > > the container and content divs I adjust with JavaSCript as the
    > > user resizes the window.
    > >
    > > As the user clicks around, I want to add more divs, with a
    > > horizontal scroll-bar appearing when the window is too narrow to
    > > add another. The user can then scroll right to see the latest
    > > addition, or make the window wider. This looks just like the Next
    > > (and now OS X) file select dialogue pane. I'm using float: left
    > > on all these internal <div>s.
    > >
    > > Trouble is, instead of a horizontal scroll-bar appearing, the
    > > next <div> floats underneath all those already there, and a
    > > *vertical* scroll bar appears. How can I prevent this from
    > > happening?

    >
    > Don't use float.
    >
    > • for the parent div: white-space:nowrap;
    >
    > • internal divs: display:inline-block; white-space:normal;


    Yes, eventually that was a useful step.

    > for older versions of IE:
    >
    > • internal divs: display:inline; zoom:1; which would make the
    > divs behave as inline-block;
    >
    > Don't see a url, not sure if js would be required or not.


    Look at:

    <http://www.clothears.org.uk/div-test.html>

    That site was down for a while, but is now back, and I've put copies of
    three stages of trying things. I think I've got something that works
    now, but it feels like a flimsy edifice. IME, that usually means the
    wrong tool for the job or wrong approach/technique.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Feb 11, 2011
    #11
    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. =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=

    DIVs floating to left display incorrect if IE4

    =?ISO-8859-1?Q?Tom=E1=9A_Bedn=E1=F8?=, Oct 23, 2003, in forum: HTML
    Replies:
    2
    Views:
    520
    Toby A Inkster
    Oct 24, 2003
  2. rich
    Replies:
    0
    Views:
    724
  3. Replies:
    6
    Views:
    446
    Philip
    Jun 23, 2006
  4. Snef
    Replies:
    18
    Views:
    1,009
  5. maya
    Replies:
    4
    Views:
    242
Loading...

Share This Page