title: Unable to produce horizonzal scroll with css
body: <p>I have HTML structure like this :</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
     &lt;div class="fixed_column"&gt;&lt;/div&gt;
     &lt;div class="fixed_column"&gt;&lt;/div&gt;
     &lt;div class="fixed_column"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS :</p>
  
  <pre><code>.wrapper{
    width:500px;
    float:left;
    /*overflow-y:scroll;*/
    overflow-x:scroll;
  }
  
  .fixed_column{
    float: left;
    height: 600px;
    position: relative;
    width: 250px;
  }
  </code></pre>
  
  <p>So I want only two columns to fit inside my <code>wrapper</code>. And so without third column being present it fits inside. </p>
  
  <p>Once I add the third column like in the HTML above, the third column doesn't stay in the same row but it drops to the next line and I <strike>end up with vertical scroller instead of horizontal</strike>. added <code>overflow-x</code> to my css and I don't get a horizontal scroll-bar but the third column still drops to the next line.</p>
  
  <p>However I tried to increase <code>wrapper</code> to <code>750px</code> and this time all three columns fit in the same line so I thought nothing is wrong with my css or did I think wrong?</p>
  
  <p>Why would there not be horizontal scroll once my <code>wrapper</code> is <code>500px</code> and I have three columns inside with <code>width:250px</code> on each.</p>