Divs floats in a container with height auto

Question

I’m having a problem structuring a layout with some divs one side of the other and when no more box fit they pass down. And the container main need to increase according to how many box you have. More or less like this:

But I do not know why it is not working, the main container does not increase in size. My code:

HTML

<div id="container">
    <div class="caixas"></div>
    <div class="caixas"></div>
    <div class="caixas"></div>
    <div class="caixas"></div>
    <div class="caixas"></div>
    <div class="caixas"></div>    
</div>

CSS

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

Jsfiddle

Answer 1

You can use a technique known as clearfix, which consists of the next element or pseudo-element having display:block; and clear:both;, ensuring that it increases no matter how much content is float:left;.

Take this example:

jsFiddle

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

Answer 2

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 code in operation click here

Answer 3

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.

Answer 4

The CSS property "overflow" specifies what happens if the content exceeds the box of an element, giving you even the ability to control the side and horizontal scrollbars.

See more about the property: CSS Overflow

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 how your code fits:

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

http://jsfiddle.net/j7Nk8/3/