Tableless Formatting Issue

I am new at CSS table-less styling, and I have built this page using #wrapper #footer #content styles. I am having trouble with the #content and .bodyareatwo styles -- the issue is, if I don't define a height to the #content style, or if the length of the text exceeds the specified height, then the footer menu ends up floating/wrapping to the right. I want to build this so no matter how much text I have in the .bodyareatwo div area, that the footer will just get pushed down on the page, not wrap to the right. I'm not sure what I'm doing wrong, perhaps I have my floats set wrong on the three elements I want in the "second row" - the left menu, the .bodyareatwo text area, and the .bodyareathree image.

Here are my examples:
This one has a height of 300 applied to the #content css style - this looks correct, but if I were to add more text, the footer will rewrap to the right:
www.ijdesign.com/flyfishing/withheight.html


This page css styling has "height: auto" in the #content css style:
www.ijdesign.com/flyfishing/withautoheight.html
See how the bottom menu now flows to right of the text area, and below the image? I want it to run across the bottom.

This page css styling I've removed the height style in the #content css style:
www.ijdesign.com/flyfishing/withNoheight.html
Same problem with the footer wrapping to the right.


I want my template to be dynamic, so it flows correctly no matter what amount of text I use in the .bodyareatwo area -- I don't want to define a height because the text length will change on other versions of this template.

Thanks for your help!

With the design as you have it, you need to clear the float in the footer. Add "clear:left;" to the rules for #footer. This will bring the footer to the end of the floated content.

You will have to play around with spacing. Note that margin-top on the footer ignores the floated content, event with clear set. However, you can set margin-bottom on the floated elements (.menubox, .bodyareatwo, .bodyareathree) and it will work. I tried with a value of 35px and it looked identical to your withheight version (along with setting footer to clear:left of course).

Alternatively, you could set padding-top on your footer, though you will need to adjust the background position as well. Try padding-top: 55px (add 35 to the existing 20px) and background-position: center 35px;.