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:
This page css styling has "height: auto" in the #content css style:
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:
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!