Выравнивание div по горизонтали, без вертикальной укладки, в IE7

Question

У меня есть фиксированный контейнер, и внутри него находится дополнительный контейнер, в котором размещается несколько DIV, основанных на выборе пользователя. Мне нужны эти дополнительные DIV для выравнивания по горизонтали и обеспечения горизонтальной прокрутки (но не вертикальной прокрутки).
Такие как это:
[x] [x] [x]

По сути, моя установка выглядит следующим образом:

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

CSS разбивается так:

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

Эта настройка прекрасно работает в Firefox, однако в IE7 она продолжает работать. Все элементы #final располагаются вертикально:
[Х]
[Х]
[x]

Есть предложения, как это исправить?

Answer 1

Несколько проблем здесь. Для начала:

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

У вас должен быть DIV после ваших перемещений, который остается постоянным, и ваш браузер должен указывать не перемещать любые последующие элементы (очистить: оба).

И у вас есть несколько «финальных» DIV, поэтому они должны быть в классе CSS, а не в ID.

.final {
  float: left;
}

Это должно сделать это!

Редактировать: Это исправит ваши HTML / CSS ошибки, по крайней мере. Но я только что заметил, что вы хотите, чтобы документ прокручивался вправо. Единственный способ сделать это - установить ширину #container div, чтобы она была шире суммы всех ширин .final div. В противном случае ваш браузер попытается сбросить все "вниз".

Answer 2

Попробуйте это ......

<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;
}