Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    1
    Thanks
    0
    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:
    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!

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    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
    •