Hi all
Using google, I found the css rule white-space: nowrap which will stop the browser from wrapping the content within that element (eg. within that div)
Thing is, if I have other divs/block level elements inside that div, then the white-space rule stops working (so the divs wrap). I was wondering if anyone’s managed to do this before and so know what I’m missing
(The reason I’m wanting to do this is so that I can use jquery’s serialscroll)
Can you please provide us with some code so we can see whats going on? 
You can target all elements inside the content div by using the universal * in the selector:
#content * {
white-space: nowrap;
}
Tried that erik, but it didn’t work 
The HTML is:
<div class=“scroller”>
<div class=“infobox”>
<!— lots of html –>
</div>
</div>
CSS:
.scroller {
margin: auto;
white-space: nowrap;
width: 100%;
overflow: auto;
}
I’m after all the divs of class ‘infobox’ to be next to each other, with no wrapping. The scroll works fine if there’s just one element in there (eg. an image) but once the infobox div is introduced, they start wrapping
I’m not explaining this well, am I?
No, but I think I know what you’re making.
You can set a small width and height with overflow: auto (to generate at least a horizontal scrollbar for those of us who don’t Jabbadascript enable) like you already have (but without the white-space: nowrap, that’s not for cases like these), and the box inside, with all your boxes you don’t want to wrap, set as an absolutely positioned child with a super huge long width. So long as the width is longer than the total widths of the stuff you’re putting inside it, there will be no wrapping.
You can see this with and without JS on the apple.com/mac page, if it’s still there. They clearly made sure the slider still worked for folks without Javascript, which is a Good Thing.
http://apple.com/mac
If you don’t want a big empty end, because you never know how many things will be inside or how wide they will be, you could also use Jabba da script to dynamically calculate and set the width on that inner element, while for everyone else w/o JS, just have a super wider-than-ever- needed width.
Here’s an incomplete scroller I made, which still has the nasty nasty Dynamic Dump code inside the HTML where it doesn’t belong, and where I actually don’t implement it (because this is a static example for my colleague to script to: http://stommepoes.nl/Homeselling/secondhome/secondhomehuis.html
(the scroller is made super-wide because when I first built it, there was a 10-image limit, and then I learned a partner had homes with gazillions of fotos… so I made room for those gazillions, and in theory Javascript should shorten that for those who have JS enabled)
When redoing another site, I learned from my mistakes and made it much, much simpler:
<div id="gallerycontainer">
<div id="gallery">
<a href="#"><img src="secondhome/633_0.jpg" alt="" /></a>
<a href="#"><img src="secondhome/633_1.jpg" alt="" /></a>
<a href="#"><img src="secondhome/633_2.jpg" alt="" /></a>
<a href="#"><img src="secondhome/633_3.jpg" alt="" /></a>
<a href="#"><img src="secondhome/633_4.jpg" alt="" /></a>
<a href="#"><img src="secondhome/633_5.jpg" alt="" /></a>
<a href="#"><img src="secondhome/633_6.jpg" alt="" /></a>
<a href="#"><img src="secondhome/633_7.jpg" alt="" /></a>
<a href="#"><img src="secondhome/633_9.jpg" alt="" /></a>
<a href="#"><img src="secondhome/huisfotoguisy.gif" alt="" /></a>
</div>
</div>
#gallerycontainer {
position: relative;
height: 189px;
width: 95%;
margin: 0 auto;
overflow: auto;
}
#gallery {
width: 4520px;
position: absolute;
z-index: 1;
}
#gallery a {
float: left;
width: 219px;
height: 165px;
margin-right: 5px;
border: 1px solid #000;
}
Note I should have the heights and widths of the images in the HTML, I just didn’t for some reason (bad poes, bad).
So if looking at all that Apple code has you groaning, know that the basics above are all you would really need.
Here I’m only floating the anchors, but I’ve seen them using display: inline-block with divs etc as well. That might even work better than just floats.
I’ve found without the white-space: nowrap the boxes will wrap, whether or not you set it to autoscroll?
Here I’m only floating the anchors, but I’ve seen them using display: inline-block with divs etc as well. That might even work better than just floats.
Aha, giving it display: inline-block did the trick. I never did quite understand what that rule did
Thanks for the comprehensive reply
Yes you weren’t. Now I think I understand like Stomme poes does.
Then try this, the right negative margin extends the floating scrollbox’ width to fit all divs without wrapping to that limit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#scroller {
margin: 0 auto;
width: 300px;
height: 100px;
overflow: auto;
}
.scrollbox {
float: left; /* makes it shrink-wrap all the floating divs inside */
margin-right: -30000px; /* allows the width expanding beyond parent edge to give adjacent space *//*N.B. the limit in Opera is a total scroll width of 32778px */
}
.scrollbox div {
float: left;
border: 1px solid #000;
width: 100px;
height: 80px;
background: #f99;
}
</style></head><body>
<div id="scroller">
<div class="scrollbox">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
<div>Box 5</div>
<div>Box 6</div>
<div>Box 7</div>
<div>Box 8</div>
</div>
</div>
</body></html>
Explain more if this is not the solution.
In IE it does, but not in FF.
Think you mean not in IE?
Decided to use display: inline-block, with your suggestion in an IE only stylesheet. That way I don’t get a massive scrollbar in the good browsers 
No, I meant FF2.
You are not adressing me I guess. Try my code, the scrollbar adapts to the content and the scrollbox allows much more “in one line” content to be added.
Oh. It breaks in IE too
You are not adressing me I guess. Try my code, the scrollbar adapts to the content and the scrollbox allows much more “in one line” content to be added.
Oops, I wasn’t, sorry. Tried your code, but I couldn’t get that to work Thanks for the suggestion, anyway
Is the problem solved?
If so, how does the solution look like?
What IE versions do you use?
Yeah, testing as working in IE7, Firefox 3, and Safari
Basically I use display: inline-block, with an IE only stylesheet which uses Poes’s suggestion of having an extra-wide containing div inside a div
Hmmm, I only took a quick look at erik’s code but I’m going to test it out… I rather dislike having the width of the inner box set to much larger than needed, what actually I would love to have it shrink wrap like a single float would… hmmm, that’s when white-sapce: nowrap could work.
Display: inline-block might be working in IE by setting Haslayout, which is actually a separate issue. Display: inline-block itself doesn’t work in FF2 but does in FF3 (FF2 needs the moz testing prefix, display: -moz-inline-box, or -moz-inline-block).
Um, here’s the gallery I saw that used display: inline-block:
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
It’s a demo.
Aw, dammit. Erik, I cried for joy when I saw what that code example could do, working in FF3 and IE7 AND IE6.
However Konqueror only lets two boxes stack alongside each other before it starts stacking them underneath, and Opera stacks all of them (vertically).
SafariChrome does it right.
I played around with the margins, and Opera acts very strangely-- it seems to have a limit with those. I could go up to a negative margin of 2020em fine. 2030 em created the first vertical scrollbar, but still remained in line, and 2035em made everyone stack vertically like normal blocks. I played with my browser width and nothing changed that.
Nothing changed Konqueror, but there’s a reason why I dislike that browser.
So if we kept it down to 2020 em then Opera works too.
http://stommepoes.nl/erikegallery.html
*Edit, demo already taken down but anyone can just copy erik’s code too and look in Opera/Konq : )
Hi,
I wrote an article that may be useful about something like this that may be useful.
It doesn’t need any widths either and the elements won’t wrap.
I found the css rule white-space: nowrap which will stop the browser from wrapping the content within that element
white-space:nowrap only applies to the inline element content and won;t work for block elements or floats. It will stop text from wrapping but not divs or block level content.
( The first demo uses display:inline-block and some proprietary moz code for older mozilla an thus stops the elements from wrapping. This example used display:table for good browsers.)
IIRC, I used 999em when I tested that scrollbox some time ago. Just happend to choose another value in this example. 
Thanks for the Opera testing, when I checked the limit in Opera it seemed to be a total scroll width of 32778px.
Glad you find it useful.
I think the problem is that your using percentage.
Set your element width and height to a fixed value based on 1024X[something] resolution.
That’s what i am doing to my project website.
Nice solutions Erik and Paul! Looks like there are three ways to do it now. Good article Paul. It was a very educational read!