Наличие div остается ниже всех остальных div на моей странице

Question

Прямо сейчас у меня что-то вроде этого:

<div id="pagebody">
    <div id="left-entries"> </div>
    <div id="right-entries"> </div>
</div>

<div id="footer">
    ....text....
</div>

left-entries и right-entries имеют float: left;, так что они появляются рядом друг с другом в пределах pagebody.

pagebody имеет margin-left: auto; margin-right: auto;, так что он находится в центре.

Как я могу получить footer чтобы ВСЕГДА отображаться под pagebody? Прямо сейчас это расположено несколько позади всего. У меня есть ощущение, что это потому, что pagebody не имеет определенной высоты (потому что высота определяется тем, что внутри него, и это зависит от содержимого).

Есть идеи?

Answer 1

Если вы добавите clear:both; в #footer, он всегда будет ниже тела страницы

Answer 2

Я бы порекомендовал очистить ваши плавающие DIV.Вы можете сделать это, добавив в класс «clear» любые родительские элементы, которые содержат плавающие дочерние элементы.Я думаю, что это работает лучше всего, потому что это меньше разметки в вашем HTML.(через Николас Галлахер )

Например:

<style>
    .clear:before, .clear:after { content:""; display:table; }
    .clear:after { clear:both; }
    .clear { zoom:1; } /* IE 6/7 (hasLayout) */
</style>

<div id="pagebody" class="clear">
    <div id="left-entries"> </div>
    <div id="right-entries"> </div>
</div>

Должен очистить что-нибудь под #pagebody DIV.

Answer 3

Вы должны очистить его.

clear: both;