www.webdeveloper.com
Results 1 to 5 of 5

Thread: Content Overlapping Footer

  1. #1
    Join Date
    Jul 2006
    Posts
    62

    Content Overlapping Footer

    Hello,

    Just today I've finally started having a go with absolute and relative positioning after being long devoted to using floats. It's gone mostly okay, but I've run into a problem which you should be able to see here. If you want to see the stylesheet, then here you go.

    So quite simply, why is my content running over the footer? The footer is outside of the big relatively positioned container (in which all my absolutely positioned elements like the navigation boxes and the main content and Twitter areas sit.

    So why isn't that box stretching to fit and pushing the footer (and anything that comes after the relatively positioned container) down to suit? I don't get it. Hopefully you do! All comments and advice appreciated.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Absolutely positioned elements, regardless of what elements they are inside are not considered to be in the normal document flow, and thus their positions and dimensions have no effect on anything else on the page.

    Remove all other stylings on #scooby and replace with this:

    Code:
    #scooby {float: right; }
    Floats are also considered out of the normal document flow like absolutely positioned elements, but they still effect other elements around them.

    That took care of it for me.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Jul 2006
    Posts
    62
    Quote Originally Posted by aj_nsc View Post
    Absolutely positioned elements, regardless of what elements they are inside are not considered to be in the normal document flow, and thus their positions and dimensions have no effect on anything else on the page.

    Remove all other stylings on #scooby and replace with this:

    Code:
    #scooby {float: right; }
    Floats are also considered out of the normal document flow like absolutely positioned elements, but they still effect other elements around them.

    That took care of it for me.
    Ah, I didn't realise that absolutely positioned elements weren't in the flow. That explains it then. I applied the fix as instructed, and it almost works. I get this...

    So the wrapper now fits around everything, but you can see the footer text and border bunched up under the navigation boxes still. That's all supposed to be right down at the bottom where the social networking items are.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Add to your footer stylings:

    Code:
    clear: both;
    That will cause the footer to drop below any floated items that it's close to.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Jul 2006
    Posts
    62
    Bingo! Thank you very much, mate. Been working on this all day and read some ridiculously long and difficult hacks for this kind of stuff.

    Where do I send the fruit basket?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles