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

Answer 1

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 2

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