Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
Thread: Tableless Formatting Issue
11-01-2010, 08:17 PM #1
- Join Date
- Nov 2010
- Thanked 0 Times in 0 Posts
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:
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!
11-01-2010, 11:30 PM #2
- Join Date
- Jul 2002
- Kansas, USA
- Thanked 54 Times in 53 Posts
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;.