Странное поведение макета - PullRequest
Новая
       9

Странное поведение макета

1 голос
/ 09 июня 2010

Я немного растерялся. Вот небольшая веб-страница. Существует два основных блока: top и mainBlock.
Сначала содержит изображение. Проблема в том, что firebug показывает, что высота div # top равна 0, и поэтому следующий div mainBlock перемещается вверх. Если бы я удалил этот кусок кода: 

div#logo{
    float: left;
}

все начнет работать нормально, и div # mainBlock будет ниже div # top. Не могли бы вы объяснить, как это работает и как этого избежать должным образом?

Вот мой код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Paralab - Website &amp; interface design, web apps development, usability</title>
<style text="text/css">
html, body{
}
div#logo{
    float: left;
}
#top{
  width: 100%;
}
#mainBlock{
  width:100%;
}
</style>
</head>
<body>
    <div id="top">
        <div id="logo">
            <img alt="logo"  src="img/logo.png" />
        </div>
    </div>
    <div id="mainBlock">
        Contact Us
    </div>
</body>
</html>

Ответы [ 4 ]

1 голос
/ 09 июня 2010

Вам нужно очистить ваш поплавок.Есть несколько способов сделать это, я бы прочитал эту статью в QuirksMode об очистке поплавков для получения дополнительной информации.

1 голос
/ 09 июня 2010

, потому что он плавающий - добавьте clear:left; в свой mainBlock класс.

http://jsfiddle.net/XEaBT/

0 голосов
/ 09 июня 2010

Я настоятельно рекомендую использовать строгий тип документа вместо переходного. Вы получите более согласованное поведение во всех браузерах.

0 голосов
/ 09 июня 2010

Плавающие изображения покидают поток документа.Установить #top {переполнение: скрыто;}

...