Нижний колонтитул не в нижней части (переполнение div-s)

Question

Пожалуйста, смотрите код ниже:

<div style="background:#F00;width:800px;">

<div style="float:left">
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />
Hello  Hello  Hello  Hello  Hello  Hello  Hello  Hello  <br />


</div>

<div style="float:right">
Thanks!
</div>


</div>

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

У меня есть два раздела, и я хочу, чтобы нижний колонтитул находился в нижней части тега первого дочернего элемента тела. Но я не хочу давать высоту любому div, так как он должен соответствовать их содержанию. Как я могу это сделать?

EDIT:

Похоже, что div нижнего колонтитула не учитывает вычисленную высоту других div.

Answer 1

вам нужно очистить поплавок первого дочернего элемента div.

2 способа сделать это, я думаю.

1) сразу после <div style="float:right">Thanks!</div> добавить:

<div style="clear:both"></div>

2) изменить нижний колонтитул на:

<div id="footer" style="clear: both">
footer
</div>

Answer 2

Вы также можете добавить попробуйте добавить style="float: left; width: 100%" к footer. Возможно, это поможет избежать конфликтов, мешающих работе решений Shadow_boi.