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

У меня есть 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:

  

    

    

    

    

    

    

    

    

    

    

    

    

  
   
​

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