11

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?

Community
  • 1
  • 1
Jonas B
  • 147
  • 1
  • 1
  • 5

2 Answers2

17

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 }

evelynhathaway
  • 1,670
  • 14
  • 18
Xavier
  • 8,244
  • 18
  • 54
  • 85
13

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>
pat8719
  • 1,700
  • 1
  • 26
  • 47
  • 1
    that will work if there is a fixed width set on the containing div – Xavier Jun 21 '11 at 21:10
  • YES! It was exactly what I meant. Thank you very much for your help. You are the best. :-) Thank you also "Xavier". But I do not have to learn "jquery", so it is easier. I'm just a newbie. – Jonas B Jun 21 '11 at 21:21
  • Yes @Xavier is correct, a fixed width on the parent div is required for this to work – pat8719 May 25 '14 at 20:28
  • 1
    I really wish your would have used classes, you should not repeat the same id like you did. – JGallardo Feb 15 '16 at 20:39
  • @ JGallardo yes that is very bad practice I have correct my mistake, thanks for pointing that out – pat8719 Feb 16 '17 at 19:29