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 one line, with a horizontal scroll only. The 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 row, while the horizontal scroll stays blank. Any ideas what am I doing wrong and how to fix it?
P.S All elements are div-s.
Thank you in advance!
For reference see: http://jsfiddle.net/pz9AP/
Note, the wrapper div that is responsible for the actual scrolling. The contained items will float within 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With