CSS non-wrapping floating divs

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.

I tried the following, but it doesn't work: it wraps instead.

div#sub {
	background-image:url("../gfx/CorniceSotto.png");
	width:760px;
	height:190px;
}
div#sub > div#ranking {
	position:relative;
	top:42px;
	left:7px;
	width:722px;
	height:125px;
	overflow-x:auto;
	overflow-y:hidden;
}
div#sub > div#ranking > div.player {
	float:left;
	width:67px;
	height:120px;
	margin-left:5px;
	background-color:#f3e1bb;
}

I've tried a few things (inline,table-cell,etc.) but they all failed.

Can this be done? If so, how?

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/

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

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/

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;
}