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?

Wrap your smaller divs in a third div that has a greater width than your main div like so. Assuming I understood your question correctly no jquery is needed.

<html>
    <head>
        <style type="text/css">       
            .div_1
            {

                height: 350px;
                width: 350px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_3
            {
                float: left;
                height: 350px;
                width: 500px;
                margin: auto;
                border: 1px black solid;
                overflow-y: hidden;
                overflow-x: scroll;
            }

            .div_2
            {
                height: 100px;
                width: 100px;
                border: 1px solid #A2A2A2;
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="div_1">
            <div class="div_3">
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
                <div class="div_2"></div>
            </div>
        </div>
    </body>
</html>

Xavier

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.