Question

Please see code below:

<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>

I have two sections and I want the footer be in the bootom of first child div of body tag. But I don’t want to give height to any div, as they should be aligned to their content. How can I do this?

EDIT:

Seems that footer div does not consider the computed height of the other divs.

Answer 1

you need to clear the float of the first div child.

2 ways of doing it i think.

1) right after <div style="float:right">Thanks!</div>
add:

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

2) change footer to:

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