Divs floats in a container with height auto

You can use a technique known as clearfix, which means that the next element or pseudo-element has display:block; and clear:both; , ensuring that it increases even though the content is float:left; . >

See this example:

jsFiddle

This same form is adopted by CSS frameworks like Twitter Bootstrap for example.

I made some changes

CSS:

#container{
    width:620px; // aumentei para 620
    height:AUTO;
    border:1px #FF0000 solid;    
}
.caixas{
   width:200px;
   height:200px;
   border:1px #00FF00 solid;
   display:inline-block; // retirei o float e usei display:inline-block

}

Display: inline-block

To view the working code click here

I particularly solve this with a float: left in the parent element. But the correct thing is to use the clearfix that friend Diego Lopes Lima commented on.

The CSS property "overflow" specifies what happens if the content exceeds the box of an element, giving even the possibility of controlling the lateral and horizontal scroll bars.

See more about the property: CSS Overflow

By using it we can solve your problem with only 1 line of code, just add this property with the value "hidden" in the styles of your container.

See what your adjusted code looks like:

#container{
    width:610px;
    height:AUTO;
    border:1px #FF0000 solid;  
    overflow:hidden;
}
.caixas{
   width:200px;
   height:200px;
   border:1px #00FF00 solid;
   float:left; 
}

link