Css issue div height when using float

Question

I have a div area like this:

<div class="con">
    <div class="container"></div>
    <div class="sidebar"></div>
</div>

And CSS:

.con{
    width:100%;     
}
.con .container{
    width:70%;
    min-height:500px;
    float:left;
    background:#f00;

}
.con .sidebar{
    width:30%;
    min-height:500px;
    float:right;
    background:#ccc;

}

The container and sidebar class heights are dynamic. When one of these class heights increases, class con also has to increase. But my problem is class con height is always 0, I can't seem to give the con class a static height.

Answer 1

Add overflow: auto; to .con:

.con {
    width: 100%; 
    overflow: auto;    
}