How to avoid child block elements to be wrapped?

I have a container div .parent with a fixed width 500px which contains a lot of child divs .child.

The problem is that the child divs are getting auto wrapped, in my case i want them to continue in one line even if they'll be hidden and after that i'll add custom buttons to horizontally scroll the .parent div.

Demo: http://jsbin.com/egohi3开发者_JAVA技巧

How to achieve that with keeping the floating?

Thanks

Make the parent element have white-space:nowrap and the child elements to be display:inline-block (instead of floating). Here is a modified example: http://jsfiddle.net/7we5q/

@Phrogz's answer will work. You could also add another wrapper <div> inside "parent" and give it both "overflow: hidden" and a huge width (like "width: 100000px;").