title: How to force the horizontal scroll bar to appear?
body: <p>Consider the <a href="http://jsfiddle.net/7bJSp/" rel="nofollow">following code</a>:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class='a'&gt;&lt;/div&gt;
      &lt;div class='a'&gt;&lt;/div&gt;
      &lt;div class='a'&gt;&lt;/div&gt;
      &lt;div class='a'&gt;&lt;/div&gt;
      &lt;div class='a'&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
      width: 300px;
      border: 1px solid black;
      overflow: auto;
  }
  .a {
      width: 70px;
      height: 70px;
      border: 1px solid red;
      float: left;
  }   
  </code></pre>
  
  <p>How could I force the horizontal scroll bar to appear rather than displaying the red div's in the second line ?</p>