Css вопрос высота DIV при использовании поплавка

Question

У меня есть div область, как это:

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

И 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; 

} 

В container и sidebar высоты класса являются динамическими. Когда одна из этих высот класса увеличивается, класс con также должен увеличиваться. Но моя проблема - класс con height всегда 0, я не могу показать класс con статической высотой.

Answer 1

Добавить overflow: auto; в .con:

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

Answer 2

Я не уверен, почему это важно, почему .con не распространяется по высоте, но это довольно печально известная проблема. Добавить overflow: hidden в .con. Если это не сработает, поставьте <br style="clear: both;"> после тега.

Answer 3

использование прозрачного класса

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

.clear 
{ 
    clear:both; 
} 

Answer 4

попробовать это

.con{ 
    width:auto; 
    overflow: auto; 
    margin:0 auto;  
} 

Answer 5

Вы можете использовать как ..

.con{display: table;}