normally when i have a container div which for example has 2 inner divs floating left i usually float the container set it with a width and set height as auto so that as the height of any of the 2 inner divs increases the container div automatically increases

for the 2 inner divs i write
#outerdiv .innerdiv1{
float: left;
width: 400px;
height: auto;
}
#outerdiv .innerdiv2{
float: left;
width: 500px;
height: auto;
}

however i have seen a code for such a situation wherein the container is mentioned as
#containerdiv{
overflow: auto;
}


here the containerdiv is not set to float left and no width and height specified and only a single line as overflow: auto

my question instead of setting a float left, width of some value and height to auto for the containerdiv what is the need to use #containerdiv{ overflow: auto;} what advantage would it give if i were to have instead as #container{float: left; width: 900px; height: auto;} which i usually do

please advice

thanks

The overflow: auto; is to trigger the "hasLayout" for IE so the container will not allow the floated elements to "escape".

http://www.quirksmode.org/css/clearing.html

Here's an example of why using overflow: auto; might work better. If you do this: #container{float: left; width: 900px; height: auto;}
but you wanted the container div to be centered, it would be a little difficult to achieve because you are floating the container to one side. If you use overflow: auto; instead of floating the container, you can apply auto margins on the container to center it - like this: #container{overflow: auto; width:900px; margin: 0 auto;}

Another advantage would be that when you use overflow: auto; instead of floating the container, you aren't removing the container from the natural flow of the document. Floating the container could cause you to get some weird results with surrounding content. If you can avoid floating the container, you know other elements outside of the container should behave normally.

set height as auto so that as the height of any of the 2 inner divs increases the container div automatically increases

Setting height to auto is rather pointless, as the correct default behavior is for the container to stretch vertically with it's contents anyway.