title: scrollbar in main div to display divs within it
body: <p>I am building a site that is only 640px wide and I have a div that I want to float a number of divs and have a scroll bar appear below so the user can scroll left to right to view the different divs.</p>
  
  <p><a href="http://jsfiddle.net/nNG64/1/" rel="nofollow noreferrer">http://jsfiddle.net/nNG64/1/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="all-videos"&gt;
    &lt;div class="video-item"&gt;Video one&lt;/div&gt;
    &lt;div class="video-item"&gt;Video two&lt;/div&gt;
    &lt;div class="video-item"&gt;Video three&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#all-videos {
    width: 640px;
    height: 300px;
    overflow: scroll;
    border:1px solid red;
    background: #000;
  }
  
  .video-item {
    float: left;
    background: #eee;
    border:1px solid #000;
    width: 500px;
    padding: 20px;
    height: 280px; 
  }
  </code></pre>
  
  <p>The one time I want to display a scrollbar that goes horizontal, I can't, but when I don't want one...it finds itself in there to be debugged :)</p>
  
  <p>Attached is a screenshot of the proof, I'll have to style the scrollbar but that shouldn't be a problem, I just need to get this to work.</p>
  
  <p><img src="https://i.stack.imgur.com/ACrXr.png" alt="enter image description here"></p>