css - Horizontal scroll in DIV with many small DIV's inside (no text)

Question

Objective

I have a main DIV with fixed height and width, and in that I want have lots of small DIV's to float freely. I have more small DIV's than can fit in the main DIV. Then it seems that by default is disappear small DIV's down outside the main DIV. I want them instead to disappear to the right.

I want to trigger a horizontal scrollbar, but no vertical.

Background

I tested this with white-space: nowrap as described at http://www.webmasterworld.com/forum83/8844.htm

And it works perfect if I have only text or images in the main DIV.

Question

But how do I do when the main DIV contains only small DIV's?

Answer 1

I have done this using jQuery, HTML and CSS:

HTML

<div id="overflow">
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

#overflow{
    border: 1px solid #000;
    height: 220px;
    width: 220px;
    overflow-x: scroll;
    overflow-y: hidden;
}
#overflow .container div{
    border: 1px solid #CCC;
    float: left;
    width: 200px;
    height: 200px;
}

jQuery

$(function(){
    var width = 0;
    $('#overflow .container div').each(function() {
        width += $(this).outerWidth( true );
    });
    $('#overflow .container').css('width', width + "px");
        alert(width);
    });
});

Basically the div can not use a fluid width in CSS as width is applied inherently from the parent div.

Using some jQuery code you can attach the width to the containing div easily.

Here is the fiddle with the final code.

OR

Use a fixed width on the container div i.e. #overflow .container { width : 1880px }