View Full Version : Tableless Formatting Issue

Nov 1st, 2010, 08:17 PM
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!

Nov 1st, 2010, 11:30 PM
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;.