Results 1 to 3 of 3

Thread: Footer won't stay below content

  1. #1
    Join Date
    Nov 2008

    Unhappy Footer won't stay below content

    Hi there

    I've build a template using CSS positioning, but I can't get the footer to stay below the content when the content expands. I know it's something to do with positioning and floats, but I don't know where to start or even whether to start again.

    Can anyone offer a solution? page: http://www.leisuredays.co.uk/static-...testindex.html

    CSS http://www.leisuredays.co.uk/new.css

  2. #2
    Join Date
    Jan 2009
    There is something strange with the way you created the page that has this not really acting like a column layout and I think that is causing the white gap near the bottom above the footer. The expandedcontent div seems outside the normal flow and is just constrained to fit where it is. When ever your right column pushes the container box lower than expandedcontent div, you're going to get that white box.

    It might be better if you had a maincontent div that had three column divs inside it, floating next to each other. You can use the maincontent div to repeat your background image vertically so that the entire content area's background extends to the bottom of the maincontent div and you don't get gaps.

    Typically when using floats, if something isn't working the way you expect, the problem is caused by either widths not being what you expect or you haven't cleared elements that need to be cleared.

    For something like a footer that should span the entire width, you should use:

    clear: both;

    On your footer div. This will make sure nothing floats to the left or right of it.

  3. #3
    Join Date
    Nov 2008
    I've begun to rebuild with all divs as floats and one background image as you suggested, and so far so good. The footer is floating beneath the content and the mid section expands without any problems. (In FF anyway!)

    Thanks for your help!

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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