The horizontal scroll div just doesn't work

Question

I have a div with the following style:

height:200px; overflow-x:scroll; overflow-y:hidden; width:682px; 

I need the elements to be next to each other on the same line, only with horizontal scrolling. Elements inside have the following styles:

 width:60px; padding:10px; float:left; 

But when they reach the end of the parent div, they start on a new line, and the horizontal scroll remains empty. Any ideas what I'm doing wrong and how to fix it?

PS All elements of div-s.

Thanks in advance!

Answer 1

For reference see: http://jsfiddle.net/pz9AP/

Note that the wrapper is the div that is responsible for the actual scrolling. The contained elements will float inside the container element, which, in turn, will scroll inside the wrapper.

 #wrapper { height: 200px; width: 682px; overflow-x:scroll; overflow-y:hidden; } #container{ width:2000px; } .item{ width:60px; padding:10px; float:left; } <div id="wrapper"> <div id="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> <div class="item">12</div> </div> </div>