два плавали дивы не полностью содержатся в родительском DIV

Question

Моей скрипки:

http://jsfiddle.net/yJdbF/17/

HTML:

<div class="container"> 
    <div class="content"> 
     <div class="span70"> 
      DDDDD 
     </div> 
     <div class="span30"> 
      FFFFFFFFFF 
     </div> 
    </div> 
</div> 

CSS:

.container { 
    margin-top : 65px; 
} 

.content { 
    border : 10px solid green; 
} 

.span30 { 
    width: 40%; 
    background-color : red; 
    float : left; 
} 
.span70 { 
    width: 60%; 
    background-color : blue; 
    float : left; 

} 

div.span70 и дела. span30 не полностью содержатся внутри div.content. span * divs - это float divs (которые сложны).

как я могу полностью их содержать внутри?

Answer 1

Вам нужно очистить свои поплавки. Например, с Николя Gallagher micro clear-fix или просто с overlow: hidden

.content { 
    border : 10px solid green; 
    overflow: hidden; 
} 

DEMO

Answer 2

Вы должны добавить clearfix см обновленный fiddle.

Css

.clear { 
    clear:both; 
} 

Html

<div class="container"> 
    <div class="content"> 
     <div class="span70"> 
      DDDDD 
     </div> 
     <div class="span30"> 
      FFFFFFFFFF 
     </div> 
    </div> 
    <div class="clear"></div> 
</div> 

Answer 3

Если положить

переполнения: скрытый;

на вашем. Содержании класса, то он работает.