title: No horizontal page scroll when nowrap is set on DIV
body: <p>I'm trying to create a large number of DIVS in javascript, and that I don't want the page to be wrapped. When I set the nowrap on CSS, there is no horizontal scroll. Can anybody help me with that? My JSFiddle: <a href="http://jsfiddle.net/UY4K3/1/" rel="nofollow">http://jsfiddle.net/UY4K3/1/</a></p>
  
  <p>JS:</p>
  
  <pre><code>var table_size=50;
  
  for(var i=0;i&lt;table_size;i++){
      $('#table').append("&lt;div class='inline' id='"+i+"'&gt;"+i+"&lt;/div&gt;");
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.table {
      height: 20px;
      position: fixed;
      left: 20px;
      outline: black solid none;
      white-space:nowrap;
      width: 100%;
  }
  .inline {
      display:inline-block;
      width:18px;
      height:18px;
      border:1px solid;
      text-align:center;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id= "table" class="table"&gt; &lt;/div&gt;
  </code></pre>