haciendo que el contenido div se desplace horizontalmente y no verticalmente

Question

Tengo un div con algo de contenido, un puñado de pulgares, me gustaría que siempre sea horizontal y cualquier desbordamiento se desplaza horizontalmente. Me gustaría que el div ocupara un ancho del 100 por ciento, manteniendo los pulgares centrados en el grupo, lo que significa que cuando la página es más ancha, el grupo permanece centrado y no se queda a la izquierda. Tengo un jsfiddle y no puedo entender por qué no funciona, siempre empuja el desbordamiento en una segunda fila en lugar de permitir que la función de desbordamiento se haga cargo.

http://jsfiddle.net/z5nEQ/1/ ese es el violín y el código en el que es:

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>​ 

alguna idea sobre esto? Gracias por cualquier ayuda

Answer 1

escribe así:

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

Marque esta http://jsfiddle.net/z5nEQ/3/