CSS Horizontal scroll problem

Question

Problem

I need the content to force to scroll on X axis, not down the Y axis.

HTML

I know this is formatted badly but it's dynamically generated and has no white space.

<div class="folderWrapper" id="folderContainer"><div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0"><div class="counter" id="fCount0">4</div><div class="folderName">Unsorted</div></div><div class="folderBox ui-droppable" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div><div class="folderBox" onclick="folderSelected(1)" id="fBox1"><div class="counter" id="fCount1">0</div><div class="folderName">test</div></div></div>

Formatted nicely with one folder inner box:

<div class="folderWrapper" id="folderContainer">
    <div class="folderBox ui-droppable folderBoxSel" onclick="folderSelected(0)" id="fBox0">
        <div class="counter" id="fCount0">4</div>
        <div class="folderName">Unsorted</div>
    </div>
</div>

CSS

.folderWrapper{
    overflow-x:scroll;
    overflow-y:hidden;
    height:85px;
    white-space:nowrap;
    margin-bottom:5px;
}
.folderBox{
    float:left;
    background-image:url(../images/artworking/folder.png);
    background-position:center top;
    background-repeat:no-repeat;
    width:85px;
    height:55px;  
    position:relative;
    padding:5px;
    z-index:4;
    white-space:nowrap;
}
.folderBox:hover{
    cursor: pointer;
}

Thanks if anyone can help!

Edit

Bazzz's answer works in all browsers except IE compatability mode (unfortunatly it has to be compatible) which gives the following look:

With IE hack:

Answer 1

use inline-block on your folderBox instead of float:left

.folderBox{
    float: left; /* remove this line */
    display: inline-block; /* add this line */
}

whitespace: no-wrap doesn't work on floated elements, it works on inline elements.

For IE 7 I found a little hack that might help you out:

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

try this css:

.folderBox{
 display: inline-block;
 zoom: 1;
 *display: inline;
 }

Most recent edit:

This css works in IE 8 compat mode (IE7 standard):

.folderWrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    height:85px;
    width: 300px; /* not really your css, I used it in my test case */
    white-space:nowrap;
}
.folderBox{
    display: inline-block;
    zoom: 1;
    *display: inline;
    background-image:url(../images/artworking/folder.png);
    background-position:center top;
    background-repeat:no-repeat;
    width:85px;
    height:55px;  
}

I believe the non-overflowing problem in IE7 lies in the position:relative that you use. I removed it, and some other css and now it works.