CSS multiple divs overflow
===

I have a sample with 10 divs in a row, places in one container, in the footer of the site. This site will be a responsive one, it will work on smartphones too. 

On smartphones, I want to make a horizontal scrollview, but I need the overflown divs (for example, 4,5,6,7,8,9,10) to be placed in a row, outside the viewport (I will slide them in). With the css from [this jsFiddle][1], the divs that don't have place in the row are placed under the viewport, not in the same row. **How can I place them in the same row?**

Basically, I want just n squares in the viewport, the rest of them, I will slide them in. 

P.S. I'm trying to do this manually, are there some scroll viewer plugins in jQuery? (not jQuery Mobile)
  [1]: http://jsfiddle.net/hkFPB/