title: Align divs horizontally, no vertical stacking, in IE7
body: <p>I have a fixed container and inside of that is an additional container which houses a number of DIVs based on user choices. I need these additional DIVs to line up horizontally and provide horizontal scrolling (but not vertical scrolling).<br>
  Such as this:<br>
  [x] [x] [x]</p>
  
  <p>Essentially, my setup looks like this:  </p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="second"&gt;
        &lt;div class="final"&gt;&lt;img src="..." /&gt;&lt;/div&gt; //Repeat as needed from user
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS breaks down as such:</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>#container {
    position: fixed;
    top: 200px;
    left: 0px;
    height: 500px;
    width: 100%;
  }
  #second {
    height: 500px;
  }
  #final {
    display: inline-block;
    float: left;
  }
  </code></pre>
  
  <p>This setup works fine in Firefox however it continues to break in IE7. All of the "#final" divs are stacking vertically:<br>
  [x]<br>
  [x]<br>
  [x]  </p>
  
  <p>Any suggestions on how to fix this?</p>