2013-09-29 3 views
1

Так что это, вероятно, очень незначительная корректировка, которая должна быть сделана для кода HTML/CSS, но вот проблема, с которой я столкнулся. Мой код для общего HTML страницы выглядит следующим образом:Вопрос о контейнере DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html" /> 
<link href="sites/css/style.css" rel="stylesheet" type="text/css" /> 
<title>My Page</title> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="header">Header</div> 
     <div class="navbar"> 
      <ul> 
       <li>Home</li> 
       <li>About</li> 
       <li>Services</li> 
      </ul> 
     </div> 
<div class="main_content"> 


</div> 
<div class="footer">Copyright &copy; 2012-2013.</div> 
</div> 
</body> 
</html> 

CSS-для класса .wrapper выглядит следующим образом:

.wrapper { 
    border: 1px solid #ddd; 
    margin-left: auto; 
    margin-right: auto; 
    width: 980px; 
    } 

я к выводу, что, когда я положил содержимое в любой из других DIVs что перейдите на страницу, особенно при использовании float: left; или float: right; граница для обертки не продолжается вниз страницы, если я использую класс под названием:

.clearer { 
     clear: both; 
    } 

и поставить DIV:

<div class="clearer"></div> 

в нижней части каждого DIV, который плавал. Есть ли что-то, что я здесь неправильно делаю или это общая проблема?

Любая помощь или совет оценены!

Спасибо!

Dave.

+0

Возможный дубликат [Родительский div не принимает высоту в зависимости от высоты его детей.] (Http://stackoverflow.com/questions/10879625/parent-div-is-not-taking-height-according-to-its -children-height) – Quentin

+0

вы можете применить дополнение к элементу div в вашем css. – Popsyjunior

+0

Ищите [clearfix] (http://stackoverflow.com/search?q= [css] + clearfix + is% 3Aq) –

ответ

1

Это обычная проблема, которую вы обычно можете исправить, добавив overflow: auto в #wrapper. Если это не сработает, ваше решение clearer является другой часто используемой альтернативой.

Смежные вопросы