Horizontal scroll size, how to prevent float left from wrapping

I have the folowing html and css :

HTML:

<div id="container">
    <div id="scrollbox">
        <div id="content">
            <div id="subcontent">
                <p>bla bla bla bla bla bla bla</p>开发者_开发问答
                <p>...</p>
            </div>
        </div>
    </div>
</div>

CSS:

#container {
    width:500px;
    margin:0px auto;
}
#scrollbox {
    overflow:auto;
    overflow-y:hidden;
    border:1px solid #f2f2f2;
}
#subcontent {
    width: 10000px;
}

#content p {
    width: 60px;
    height: 40px;
    float: left;
    margin-left: 30px;
}

#scrollbox, #content p {
    height: 140px;
}

So i have a large horizontal <div id="subcontent"> filled with bla bla. And i want it to be horizontal scrollable.

Problem: This solution works fine only in chrome. In others browsers the scrollWidth is 10000px. (in other words, the scrollbar is tiny and scrollZone too long)

Any other idea to make it work on all browsers ? And I'd like to get rid of my width: 10000px;.

Here is a working jsFiddle example

You set the overflow of x to scroll and the bar will always be present,

http://jsfiddle.net/bBqkx/4/