Создание содержимого div прокручивается по горизонтали, а не по вертикали

Question

У меня есть div с некоторым контентом, большой палец, я бы хотел, чтобы они всегда были горизонтальными, и любое переполнение прокручивалось по горизонтали. Я бы хотел, чтобы div занимал 100-процентную ширину, сохраняя большие пальцы в центре, что означает, что когда страница более широкая, а группа остается центрированной и не застревает влево. У меня есть jsfiddle, и я не могу понять, почему он не работает, он всегда перетаскивает переполнение во вторую строку, а не позволяет использовать функцию переполнения.

http://jsfiddle.net/z5nEQ/1/, который скрипка и код в том, что это:

CSS:

.box{ 
width:50px;height:100px;border:1px solid black;float:left; 
} 

#container{ 
width:100%; 
height:200px; 
float:left; 
overflow-x:scroll; 
} 

HTML:

<div align="center" style="width:100%;height:90px;border:1px solid red;"> 

<div id="container"> 

<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"> 
</div><div class="box"></div><div class="box"></div><div class="box"></div><div 
class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 
<div class="box"></div> 

</div> 
</div>​ 

какие-либо мысли по этому поводу? Спасибо за любую помощь

Answer 1

писать, как это:

.box{ 
    width:50px; 
    height:100px; 
    border:1px solid black; 
    display:inline-block; 
    *dsplay:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
    white-space:normal; 
} 
#container{ 
    width:100%; 
    height:200px; 
    float:left; 
    overflow-x:scroll; 
    white-space:nowrap; 
} 

Проверить это http://jsfiddle.net/z5nEQ/3/