Заставить содержимое течь горизонтально

Question

Я пытаюсь заставить содержимое поля, которое динамически центрировано по вертикали, перетекать горизонтально вместо обычного вертикального потока, который потребует прокрутки вверх или вниз.

#outerbox {
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Creating 2% margin on left & right then 3% on top and bottom */
#innerbox {
    height: 94%;
    margin: 0 2%;
    margin-top: -47%;
    position: absolute;
    top: 50%;
}

#content {
    height: 100%;
    min-height: 100%;
}

---

<div id="outerbox">
  <div id="innerbox">
    <div id="content">
      Content goes here...
    </div>
  </div>
</div>

Проблема в том, что, когда я изменяю размер окна браузера, вместо того, чтобы перемещаться вправо и иметь горизонтальные полосы прокрутки, содержимое перемещается вниз за пределы центрированного поля. Советы по поводу того, что я делаю не так и решение?

Answer 1

Вот пример создания области горизонтальной прокрутки с элементами внутри:

http://jsfiddle.net/6PupD/

Хитрость в том, что прокручиваемый контейнер имеет ширину меньше контейнера объекта. Вам нужно будет установить ширину контейнера объекта, достаточно большую, чтобы вместить все элементы.

Надеюсь, это поможет.

Bob