Stop Floating HTML elements from dropping to the next line
css, html, javascript
Solution
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/
Problem
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)?