Faire des div de contenu défiler horizontalement et non verticalement

J'ai un div avec un peu de contenu, un tas de pouce, je tiens à toujours être à l'horizontale et tout débordement défile horizontalement. J'aimerais que la div de prendre jusqu'à 100% de la largeur, en gardant le pouce, un groupe centré, sens lorsque la page est plus large puis le groupe qu'ils ont de rester centré et pas coincé à gauche. J'ai un jsfiddle et n'arrive pas à comprendre pourquoi ça ne fonctionne pas, il pousse toujours le plein dans une deuxième ligne au lieu de permettre le dépassement de fonction pour prendre le dessus.

http://jsfiddle.net/z5nEQ/1/ c'est le violon et le code qui est:

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

des idées sur ce point? Merci pour toute aide