title: how to display a horizontal scroll bar
body: <p>I have a div <code>#items</code> which wraps around a whole bunch of <code>.item</code>. I want to display the items side by side, and if they exceed the width of the page, display a horizontal scroll bar. </p>
  
  <pre><code>&lt;div id="somediv"&gt;&lt;/div&gt;
  
  &lt;div id="items"&gt;
     &lt;div class="item"&gt;
       Item content
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="someotherdiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I tried something like this but it does not work</p>
  
  <pre><code>#items{
     overflow: auto;
     width:100%;
     height:200px;       /* this is the height of each item*/ 
  }
  .item{
     float:left;      
  }
  </code></pre>
  
  <p>I thought this was the way to do it, but I can't get this to way to work, so I'm open to corrections and other ways also. </p>