Как запретить перенос элементов в элементе с overflow-x?

Question

[marsep]

Всем привет! Скорей всего суть вопроса не ясна, поэтому объясню конкретно. Нужно сверстать (html+css) следующее...
Например:
(HTML)

<div id="viewport">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

(CSS)

#viewport {
    overflow-x: scroll;
    width: 200px;
}
.item {
    width: 70px;
    height: 70px;
    float: left;
}

Из всего этого нужно сделать так, чтобы элементы с классом "item" шли в 1 строку, растягивая область скроллинга в #viewport, а не переносились на новую строку, растягивая сам элемент (#viewport) по высоте. Не получается сделать, также пробовал сделать с display: inline-block - результат тот же. Варианты с таблицей также не приемлемы. Заранее спасибо за возможные решения проблемы!

Answer 1

[tennalian]

Забавно, но это работает)
jsfiddle.net/tennalian/f4y92Lnk
Разве что у инлайн-блоков отступы, но это уж ты как-нибудь сам)

Comments

[marsep]

Как так)) Блин, значит я ступил... Спасибо за помощь)

[tennalian]

marsep: надо было white-space добавить, чтобы не переносилось на другую строку) а так все тип-топ) не за что)