CSS non-wrapping floating divs

Question

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 nee

Answer 1

Edited: Combined DanielB's and my original answer. You need to put min-width instead of width for both sub and ranking and have the elements set to inline-block with container having white-space: nowrap. See: http://jsfiddle.net/5wRXw/3/

Edit 2: For your purposes, it might be better to eliminate the overflow properties all together on the ranking element. See http://jsfiddle.net/5wRXw/4/

#sub {
    backgrond-color: yellow;
    min-width:760px;
    height:190px;
}
#ranking {
    position:relative;
    top:42px;
    left:7px;
    min-width:722px;
    height:125px;
    overflow-x:auto; /* you may be able to eliminate this see fiddle above */
    overflow-y:hidden; /* and eliminate this */
    white-space: nowrap; /* like DanielB */
}
#ranking > .player {
    display: inline-block; /* like DanielB */
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

Answer 2

Use display: inline-block instead of floatand give the container white-space: nowrap.

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

Here an example: http://jsfiddle.net/D5hUu/3/

Answer 3

inline won't work, table-cell should work - see this jsFiddle I made in answer to a similar question:

http://jsfiddle.net/DxZbV/1/

won't work in <=ie7 though...

Answer 4

whoops, I misread the question. Previous answer removed.

---

on your container, white-space: nowrap and then on the elements display: inline-block

Fiddle here: http://jsfiddle.net/HZzrk/1/