Question

im trying to create a horizontal scrolling box to create a “timeline” effect… but i cant seem to get it to scroll horizontally, versus the vertical scroll bar that shows up…thoughts?

#container{
     width:500px;
     height:250px;
     border:1px solid #cc61b8;
     overflow:auto;
}

.container-bits{
    width:250px;
    height:498px;
    float:left;
}

<div id="container">
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
</div>

Answer 1

You will need a second container inside your #container that has the width of all .container-bits together so that they won´t wrap:

#container{
     width:500px;
     height:250px;
     border:1px solid #cc61b8;
     overflow:auto;
}
#container2{
     width:10000px;          // just an example
}

.container-bits{
    width:250px;
    height:498px;
    float:left;
}

<div id="container">
  <div id="container2">
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
     <div class="container-bits">Content Here</div>
  </div>
</div>