Parent Height is Not Growing When Childern Are Floating Left - css

Question

Can you please take a look at this demo and let me know why the height of parent div .colors is not growing while the children .color are floating to left (as required)?
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
}
.color{
height:100px;
width:100px;
float: left;
text-align: center;
border: 2px solid #eee;
background:khaki;
}
<div class="colors">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>

Answer 1

Add overflow: auto to the parent.
CSS overflow:hidden with floats
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
overflow: auto;
}
.color{
height:100px;
width:100px;
float: left;
text-align: center;
border: 2px solid #eee;
background:khaki;
}
<div class="colors">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>

Answer 2

The behaviour you are observing is a result of the nested floated elements collapsing the containing parent element, as a result of them being taken out of the normal document flow.
To rectify this, consider declaring an overflow property with the value of auto on .colors.
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
/* adddtional */
overflow: auto;
}
Code Snippet Demonstration:
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
/* adddtional */
overflow: auto;
}
.color{
height:100px;
width:100px;
float: left;
text-align: center;
border: 2px solid #eee;
background:khaki;
}
<div class="colors">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
Alternatively, a helper pseudo-element could be declared to clear the float, e.g:
.colors:after {
content: "";
display: block;
clear: both;
}
Code Snippet Demonstration:
.colors{
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
height: auto;
}
.color{
height:100px;
width:100px;
float: left;
text-align: center;
border: 2px solid #eee;
background:khaki;
}
/* Additional */
.colors:after {
content: "";
display: block;
clear: both;
}
<div class="colors">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>