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

Question

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

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

css:

#wrapper{
  width:100%;
  height:90px;
  border:1px solid red;
}

.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" id="wrapper">
  <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/