How to arrange many elements side by side with no wrap [duplicate]

Answer 1

You need a another div within the scrolling div that has a total width equal to all of the widths of it's children.

See: http://jsfiddle.net/joshdavenport/SasDh/2/

There was already an extra div there so I used that one

Bonus: To get rid of the vertical scroll bar use overflow-y: hidden. See: http://jsfiddle.net/joshdavenport/SasDh/3/

Answer 2

The <span> tag is used to group inline-elements in a document.
(source)

Answer 3

Change float: left to display: inline-block; and add white-space: nowrap to the container.