Stop Floating HTML elements from dropping to the next line

Question

I am building a site that is designed for a number of dynamic number of div elements (each with their own widths) to be displayed, but instead of going down the page, they go along horizontally. However, when the number of items combined width is larger than the container div, it automatically drops down to the next line. Is there anyway to stop that from happening, and allow for horizontal scrolling (by a script rather than an overflow bar)?

Answer 1

Rather than floating them, set them to display:inline-block;. Set the containing element to overflow:hidden;, and then you can use your script to scroll them through any number of means, such as adjusting the margin on the first element, or wrapping them in another element and changing the left attribute (you'll need to set the position if you go this route).

Edit: You'll also need to set white-space:nowrap

See this working fiddle: http://jsfiddle.net/D8bea/