Unlimited horizontal scroll?

I have a collection of floating divs contained inside a container div. The floating divs are generated dynamically so they could number from one to whatever. The problem I’m having is that when there are too many floating divs, the container elements width is exceeded and the remaing floating divs display below the rest.

How can i make the container div expand infinitely depending on it’s content? I tried using the overflow properties but didn’t have any luck plus such a solution looks ugly in my app.

Thanks for any help you can give me.

#container { background: #E7E7E7; position:absolute; left:0px; top:380px; width: 100%; height: auto; float: left;}

.floatingDivs {width: auto; float: left; padding: 0px;}

Hi,
This was discussed recently in This Thread. You can do it by using an inner float width a large negative margin on the right side.

Here is an Example

Normally you juset set a huge negative margin to make them align up. However you do know that position:absolute; and float:left; doesn’t mix? Btw…have the container have overflow:auto; (remove the postiion absolute and the offset properties) and set a width/height.

Now on the floating divs use white-space:nowrap;don’t float it,…gah code time.


#container { background: #E7E7E7; height:400px; width: 100%; height: auto; float: left;}

.floatingDivs {overflow:auto;display:inline;white-space:nowrap;}

Hi, thanks I tried that but it doesn’t work. It makes the floating containers display one after the other vertically. I’m really at a loss here for what to do

I can’t test locally so I would not say my code would work.

Ray gave the link I was thinking about. It gives an example.

I don’t know what your saying does not work, but the example I gave above works just fine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horizontal Scrolling</title>
<style type="text/css">

* {
    margin:0;
    padding:0;
}
body {
    background: #BBB;
}
h2 {text-align:center; padding-bottom:10px}

#wrapper {
    width:600px;
    margin: 30px auto;
    border:1px solid #000;
    background:#EEF;
    padding:10px 0 25px 0;
}
#outer-wrap {
    width: 550px; 
    height: 256px;
    margin:0 auto;
    overflow: auto; 
    background:#BCC5E1;
    border:1px solid #000; 
}
#inner-wrap {
    float:left;
    margin-right:-999em;
    padding-left:20px;
}
.floatbox {
    float:left; /*force into block level for dimensions*/
    width:200px;
    height:200px;
    background:blue;
    color:#FFF;
    margin:20px 20px 0 0;
}
</style>
</head>
<body>

<div id="wrapper">
<h2>"Horizontal Scrolling"</h2>
    <div id="outer-wrap">
        <div id="inner-wrap"> 
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div> 
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>
            <div class="floatbox"><p>Floated Container</p></div>    
        </div>
    </div>
</div>
</body>
</html>

Thanks Rayzur, is there any way to edit that example so that the the scroll bar used is the browsers own (i mean the one displayed at the foot)? I’d like for the whole browser window to be scrolled along to see the floating divs that exceed the page width

              Thanks Rayzur, is there any way to edit that example so that the the scroll bar used is the browsers own

Yeah, just treat the body as the outer element and then treat the containing div as the inner element. :wink:

Like this-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horizontal Scrolling</title>
<style type="text/css">

* {
    margin:0;
    padding:0;
}
body {
    background:#BCC5E1;
    position:relative;
}

#wrapper {
    float:left;
    margin-right:-999em;
    padding-left:20px;
    position:relative;

}

.floatbox {
    float:left; /*force into block level for dimensions*/
    width:400px;
    height:400px;
    background:blue;
    color:#FFF;
    margin:20px 20px 0 0;
}
</style>
</head>
<body>

<div id="wrapper"> 
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div> 
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>
    <div class="floatbox"><p>Floated Container</p></div>    
</div>
</body>
</html>

Yes just remove the parents.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horizontal Scrolling</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
body {
    background: #BBB;
    position:relative;
}
h2 {
    text-align:center;
    padding-bottom:10px
}
#inner-wrap {
    float:left;
    margin-right:-999em;
    padding-left:20px;
    background:#BCC5E1;
    padding:10px;
        position:relative;

}
.floatbox {
    float:left; /*force into block level for dimensions*/
    width:200px;
    height:200px;
    background:blue;
    color:#FFF;
    margin:20px 20px 0 0;
}
</style>
</head>
<body>
<div id="wrapper">
    <h2>"Horizontal Scrolling"</h2>
    <div id="slide-wrap">
        <div id="inner-wrap">
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
            <div class="floatbox">
                <p>Floated Container</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>


The position:relatives are needed for ie6 and 7.

Aah, I see. I also needed to remove the overflow from the body as well as adding relative positioning for IE.

I have edited my code above, thanks for catching that Paul. :slight_smile:

You guys are geniuses. Thanks so much for your help. The reason I couldn’t get it going was that I was using scriptaculous to edit the dom to add a new container and I didn’t remember I was doing this until I used firebug. Thanks all!!!