title: Horizontal scroll size, how to prevent float left from wrapping
body: <p>I have the folowing html and css :</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="scrollbox"&gt;
          &lt;div id="content"&gt;
              &lt;div id="subcontent"&gt;
                  &lt;p&gt;bla bla bla bla bla bla bla&lt;/p&gt;
                  &lt;p&gt;...&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      width:500px;
      margin:0px auto;
  }
  #scrollbox {
      overflow:auto;
      overflow-y:hidden;
      border:1px solid #f2f2f2;
  }
  #subcontent {
      width: 10000px;
  }
  
  #content p {
      width: 60px;
      height: 40px;
      float: left;
      margin-left: 30px;
  }
  
  #scrollbox, #content p {
      height: 140px;
  }
  </code></pre>
  
  <p>So i have a large horizontal <code>&lt;div id="subcontent"&gt;</code> filled with <code>bla bla</code>. And i want it to be horizontal scrollable.</p>
  
  <p><strong>Problem:</strong> This solution works fine only in chrome. In others browsers the scrollWidth is 10000px. (in other words, the scrollbar is tiny and scrollZone too long)</p>
  
  <p>Any other idea to make it work on all browsers ? And I'd like to get rid of my <code>width: 10000px;</code>.</p>
  
  <p><a href="http://jsfiddle.net/bBqkx/" rel="nofollow">Here is a working jsFiddle example</a></p>