overflow auto

[sudhakararaog]

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

[Excavator]

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

We float an element to put something beside it, that's what floats are for. Your 900px wide containerdiv will never have another element beside it so there is no need to float it.

Have a look at overflow:auto; explained (http://www.quirksmode.org/css/clearing.html).

There are plenty of times overflow:auto; doesn't give you the desired result and, when that happens, there are several other ways to clear you floats without floating the containerdiv.