div обертывания не растягиваются

Я не могу получить этот красный div-обертывание, чтобы растянуться мимо других div. Я пробовал использовать clear: both; атрибут и несколько других комбинаций, но безрезультатно. Может ли кто-нибудь сказать мне, что я делаю неправильно? Благодаряdiv обертывания не растягиваются

#footer-wrap{ 
 
\t width:100%; 
 
\t height:auto; 
 
\t margin: 0 auto; 
 
\t background:#dc0000; 
 
} 
 
#footer{ 
 
\t width:960px; 
 
\t height:auto; 
 
\t margin: 0 auto; 
 
\t background:#dc0000; 
 
\t padding: 30px 0 30px 0; 
 
} 
 
.footer-class{ 
 
\t width:126px; 
 
\t height:200px; 
 
\t float:left; 
 
\t background:#093; 
 
\t margin:0 30px 0 0; 
 
} 
 
.footer-class-end{ 
 
\t width:180px; 
 
\t float:right; 
 
\t background:#FF0; 
 
}

<div id="footer-wrap"> 
 
<div id="footer"> 
 
<div class="footer-class"><h5>products</h5></div> 
 
<div class="footer-class"><h5>support</h5></div> 
 
<div class="footer-class"><h5>information</h5></div> 
 
<div class="footer-class"><h5>legal</h5></div> 
 
<div class="footer-class"><h5>interactive</h5></div> 
 
<div class="footer-class-end"><h5>twitter</h5></div> 
 

 
</div></div>

источник

2015-03-14 user3760941

Вы должны очистить оставили float с clear: left.

#footer-wrap { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    background: #dc0000; 
 
} 
 
#footer { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    background: #dc0000; 
 
    padding: 30px 0 30px 0; 
 
} 
 
.footer-class { 
 
    width: 126px; 
 
    height: 200px; 
 
    float: left; 
 
    background: #093; 
 
    margin: 0 30px 0 0; 
 
} 
 
.footer-class-end { 
 
    width: 180px; 
 
    float: right; 
 
    background: #FF0; 
 
} 
 
.clear { 
 
    clear: left; 
 
}

<div id="footer-wrap"> 
 
    <div id="footer"> 
 
    <div class="footer-class"> 
 
     <h5>products</h5> 
 
    </div> 
 
    <div class="footer-class"> 
 
     <h5>support</h5> 
 
    </div> 
 
    <div class="footer-class"> 
 
     <h5>information</h5> 
 
    </div> 
 
    <div class="footer-class"> 
 
     <h5>legal</h5> 
 
    </div> 
 
    <div class="footer-class"> 
 
     <h5>interactive</h5> 
 
    </div> 
 
    <div class="footer-class-end"> 
 
     <h5>twitter</h5> 
 
    </div> 
 
    <div class="clear"></div> 
 
    </div> 
 
</div>

Ссылка: w3.org - Floats and clearing - CSS-Tricks - What is "Float"?

Новый способ клиринг поплавки без дополнительной разметки, поставив clear на :after псевдо-элемента (но имеет меньшую совместимость браузера).

#footer:after { 
    content: ""; 
    clear: both; 
    display: block; 
}

#footer-wrap { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    background: #dc0000; 
 
} 
 
#footer { 
 
    width: 960px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
    background: #dc0000; 
 
    padding: 30px 0 30px 0; 
 
} 
 
#footer:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
.footer-class { 
 
    width: 126px; 
 
    height: 200px; 
 
    float: left; 
 
    background: #093; 
 
    margin: 0 30px 0 0; 
 
} 
 
.footer-class-end { 
 
    width: 180px; 
 
    float: right; 
 
    background: #FF0; 
 
}

<div id="footer-wrap"> 
 
    <div id="footer"> 
 
    <div class="footer-class"> 
 
     <h5>products</h5> 
 
    </div> 
 
    <div class="footer-class"> 
 
     <h5>support</h5> 
 
    </div> 
 
    <div class="footer-class"> 
 
     <h5>information</h5> 
 
    </div> 
 
    <div class="footer-class"> 
 
     <h5>legal</h5> 
 
    </div> 
 
    <div class="footer-class"> 
 
     <h5>interactive</h5> 
 
    </div> 
 
    <div class="footer-class-end"> 
 
     <h5>twitter</h5> 
 
    </div> 
 
    </div> 
 
</div>

Ссылка: MDN - Clear

источник

2015-03-14 16:42:35 emmanuel