Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    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!

  2. #2
    Regular Coder
    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;.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts