Align divs horizontally, no vertical stacking, in IE7

Question

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).
Such as this:
[x] [x] [x]

Essentially, my setup looks like this:

<div id="container">
    <div id="second">
      <div class="final"><img src="..." /></div> //Repeat as needed from user
    </div>
</div>

The CSS breaks down as such:

#container {
  position: fixed;
  top: 200px;
  left: 0px;
  height: 500px;
  width: 100%;
}
#second {
  height: 500px;
}
#final {
  display: inline-block;
  float: left;
}

This setup works fine in Firefox however it continues to break in IE7. All of the "#final" divs are stacking vertically:
[x]
[x]
[x]

Any suggestions on how to fix this?

Answer 1

Several problems here. For a start:

<div id="container">
    <div id="second">
       <div class="final"><img src="..." /></div> //Repeat as needed from user
       <div style="clear:both"></div>
    </div>
</div>

You should have a DIV after your floats that remains constant, telling your browser not to float any subsequent elements (clear:both).

And you have several "final" DIVs, so they be in a CSS class, not an ID.

.final {
  float: left;
}

That should do it!

Edit: That will fix your HTML/CSS errors, at least. But I've just noticed that you want the document to scroll right. The only way to do that is to set the width of the #container div to be wider than the sum of all the widths of the .final divs. Otherwise your browser will attempt to push everything "down".

Answer 2

Try this......

<div id="container">
    <div id="second">
      <div class="final"><img src="..." /></div>
      <div class="final"><img src="..." /></div>
      <div class="final"><img src="..." /></div>
      <div class="final"><img src="..." /></div>
    </div>
</div>
<style>
#container {
  position: fixed;
  top: 200px;
  left: 0px;
  height: 500px;
  width: 100%;
}
#second {
  height: 500px;
}
.final {
  float: left;
}