Creating div content is done horizontally and not vertically

Question

I have a div with some content, a bunch of thumbs, I would like them to always be horizontal, and any overflow could scroll horizontally. I would like the div to be 100 percent wide while keeping the thumbs in the center, which means that when the page is wider and the group remains centered and does not get stuck to the left. I have jsfiddle, and I can’t understand why it does not work, it always drags the overflow to the second line, and does not allow to intercept the overflow function.

http://jsfiddle.net/z5nEQ/1/ that the fiddle and the code in it:

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

any thoughts on this? Thanks for any help

Answer 1

Write like this:

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

Check out http://jsfiddle.net/z5nEQ/3/