title: Making div contents scroll horizontally and not vertically
body: <p>I have a div with some content, a bunch of thumbs, I'd like them to always be horizontal and any overflow gets scrolled horizontally.  I'd like the div to take up 100 percent width, keeping the thumbs a group centered, meaning when the page is wider then the group they stay centered and not stuck to the left.  I have a jsfiddle and can't seem to figure out why it's not working, it always pushes the overflow into a second row instead of allowing the overflow feature to take over.</p>
  
  <p><a href="http://jsfiddle.net/z5nEQ/1/" rel="nofollow noreferrer">http://jsfiddle.net/z5nEQ/1/</a> that's the fiddle and the code in that is:</p>
  
  <p>css:</p>
  
  <pre><code>#wrapper{
    width:100%;
    height:90px;
    border:1px solid red;
  }
  
  .box{
    width:50px;
    height:100px;
    border:1px solid black;
    float:left;
  }
  
  #container{
    width:100%;
    height:200px;
    float:left;
    overflow-x:scroll;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div align="center" id="wrapper"&gt;
    &lt;div id="container"&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
    &lt;/div&gt;   
  &lt;/div&gt;​
  </code></pre>
  
  <p>any thoughts on this? Thanks for any help
  ​</p>