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;}

You can't float an absolutely positioned div, the two are diametrically opposed. Float it and leave off the absolute - you don't need it. However, if you float a div, you have to give it a dimension, so, if the #container is taking up the entire width of the screen, you don't need to float it either, it will go from left to right by default.

The width:auto is pretty useless because the NORMAL behavior for a div is to stretch with it's content.

Are these dynamically generated floating divs given dimensions when they are created ?

I posted in another and have solved the issue -
http://www.sitepoint.com/forums/show...39#post4231239