Stopping divs floating down

[Tim Streater]

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?

 

[dorayme]

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.

 

[BootNic]

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

 

[Tim Streater]

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 Streater]

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.

 

[BootNic]

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

 

[Tim Streater]

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?

 

[richard]

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>

 

[David Postill]

| In article <[email protected]>,
|
| > In article
| > <[email protected]>,
| >
| > > 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!

 

[Tim Streater]

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 Streater]

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.