title: CSS non-wrapping floating divs
body: <p>I need to create a single line containing a variable amount of (floating?) divs: the container dimension is fixed, and it is supposed to add an horizontal scrollbar when needed, never wrapping.</p>
  
  <p>I tried the following, but it doesn't work: it wraps instead.</p>
  
  <pre><code>div#sub {
      background-image:url("../gfx/CorniceSotto.png");
      width:760px;
      height:190px;
  }
  div#sub &gt; div#ranking {
      position:relative;
      top:42px;
      left:7px;
      width:722px;
      height:125px;
      overflow-x:auto;
      overflow-y:hidden;
  }
  div#sub &gt; div#ranking &gt; div.player {
      float:left;
      width:67px;
      height:120px;
      margin-left:5px;
      background-color:#f3e1bb;
  }
  </code></pre>
  
  <p>I've tried a few things (inline,table-cell,etc.) but they all failed.</p>
  
  <p>Can this be done? If so, how?</p>