Grow your CSS skills. Land your dream job.

How do i keep the footer below the content area?

  • # August 14, 2009 at 2:30 pm

    I’m making a web page template:

    http://freedomroctest.x10hosting.com/template1.html

    I’m having trouble keeping the footer at the bottom of the page as the mainArea div grows…I made the footer div slightly wider than the wrapper div so you can see where it is "stuck" on the page…

    I’ve read so many articles on this sticky footer thing and I can’t get it to act right with my page, but making a new example file without the stuff from my page works fine. Plus, I’m totally confused now about the min-height and everything else.

    Can someone please look at my code and tell me what I need to do in order keep this footer at the bottom as the mainArea grows?

    Thanks!

    # August 14, 2009 at 3:37 pm

    Sorry but you are going to have to rethink how you achieve your layout. All of the problems stem from your use of position:absolute on all of the divs. position absolute is a great tool and definitely has its uses but every time you use it, the item in question is taken out of the flow of the page and is, to all intents and purposes, invisible to all other items. So said items can’t flow around, or after, whatever is absolutely positioned.

    You would be much better off to just build the page in the normal manner and save position:absolute for when you actually need it.

    # August 15, 2009 at 4:19 pm

    #footer{clear:both} seems to work for me.
    It might not work with the absolute positioning though.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".