• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

fixing a div (footer) to the bottom of the page

Question

piehouserat    0

how can i get a div that i have which contains my footer graphic to stay permanantly at the bottom of the page?

to explain a little more i want this div to always stay fixed to the very bottom of the page no matter how little content i have above it in the main container.

i have no idea what css i would have to add to do this.

help anyone

Share this post


Link to post
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Pajter    16

HTML:

<div id="footer">footer</div>

CSS:

#footer {
position: absolute;
bottom: 0px;
}

This way you say that the div has to be 0 pixels from the bottom. Ofcourse you can change this value to whatever you like... :)

Share this post


Link to post
Share on other sites
  • 0
piehouserat    0

HTML:

<div id="footer">footer</div>

CSS:

#footer {
position: absolute;
bottom: 0px;
}

This way you say that the div has to be 0 pixels from the bottom. Ofcourse you can change this value to whatever you like... :)

thanks a lot for that :)

this method works fine for pages that dont have scroll-bars, however for pages that have content that requires scrolling down, the footer does not stick to the bottom and 'floats' on the page. any suggestions to fix this?

Share this post


Link to post
Share on other sites
  • 0
former1    27

Make it for firefox:

position:fixed;

and for IE:

position:static;

That "should" work :)

Share this post


Link to post
Share on other sites
  • 0
piehouserat    0

Make it for firefox:

position:fixed;

and for IE:

position:static;

That "should" work :)

erm, i wish it did, pages that have a lot of content and therefore have scroll-bars put the footer at the bottom but the footer then covers items on the page. ahh, this is ****ing me off.

Share this post


Link to post
Share on other sites
  • 0
AJerman    761

You need to set the position relative to a div of the main content. It's kind of hard to explain all this unless you have a good understanding of it all. The best I can do is say look at my source on one of my websties (www.kaou.org). The CSS is at www.kaou.org/ka.css. That should have a good example of what you want to do.

Hmm... after reading some of that I need to do some clean up and bug fixing on that site, still that should do for an example for you.

Edited by Betaz

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.