Question

Take a look at this fiddle. I’m trying to create a little gallery thing that the user can navigate by moving their mouse.

That fiddle is just a demo of a problem I’m having with the images. Currently, you can see that as the images scroll left, they “pop” onto the end of the line, rather than flow continuously.

If you take off overflow:hidden from the CSS, you can see that the images wrap onto multiple lines, and that’s what causes them to “pop” onto the end of the line, rather than flow continuously.

How can I force the images to stay on one line, and thus achieve a continuous flow effect?

Answer 1

Add

#gallery {
    white-space: nowrap;
}

http://jsfiddle.net/mattball/mwLDu/

It’s got as much browser compatibility as you could want, too. http://quirksmode.org/css/whitespace.html