Wazan Wazan - 12 days ago 7
CSS Question

Css issue div height when using float

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

Add overflow: auto; to .con:

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