Push footer to the bottom on all pages

HTML & CSS
1

hello

i’m trying to make the footer stay at the bottom with the only css rules i know for this part


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

it’s working great for example in the 404 page

http://ms.wpcoder.co.il/?single=AAAA

but in the home page:
http://ms.wpcoder.co.il/

is stuck in the middle

thanks for any help in this issue

2

What you are looking for is known as a “sticky footer”, and it’s not easy to d properly in CSS, but a reliable method is detailed here:

Read through that post and see if it makes sense. It’s important to follow it in every detail, as the details are really important for this.

Let us know how you go. :slight_smile:

3

hi ralph

did it was easy but two problems:

  1. how can i make the WIDTH of the main content be in Proportion relatively to the footer, example:
    http://ms.wpcoder.co.il/?page_id=54

  2. In firefox the footer is floating in the air and with firebug i saw there is margin-top 30px and margin-bottom 30px, i can’t see where that come from .
    I suspect because i had to close the wrapper div outside of the footer (for sticky footer) and center it with:


margin:2em auto

something with this rule throw 30px top and bottom, I may be right ?
if that correct, i will be more then happay to get explanation about that.

thanks

4

You haven’t got the sticky footer quite right yet. At the moment, the footer is off screen. Make sure to read though the tutorial carefully and check you code against it at each step. :slight_smile:

Not sure what you mean. They look the same width to me.

5

maybe i played exectly when you looked,look good to me,please look again.

and i mean height , sorry, i mean the content will strech until the footer no matter how much content is there.

can you advice me how can i improve my layout without affect the sticky footer ?
at the moment i set width and center (margin 2em auto ) to each div i have in my page and i think it’s not the best
do it.

and did you notice the firefox issue ?

6

Hi,

You didn’t implement the sticky footer correctly but that on its own will not be enough to make the middle section stretch as the sticky footer can only have one wrapper and that must hold all your content except the footer. No other wrappers allowed because of the way that css works.

You can provide the full length middle section using my overlay technique (ie7+) which will overlay the background colour on that middle section. However you will have to follow the instructions exactly which you have not done for the footer already :slight_smile:

It would be better for you to build your layout around the sticky footer structure rather than the other way around as there is no other way to do this.

Here is an example showing the effect I think you are looking for. Be aware that you could have the layout as a max-width layout instead of fixed width but that the content in the header and footer would still need to remain at a fixed height otherwise it will overlap.

As you have an awful lot of code in that site already you will have to be careful that the structure matches my example exactly.

Please read the faq on the sticky footer again and on 100% height as they hold important concepts that need to be understood before you can manipulate or make changes to the layout.

7

hi paul

thanks very much for the help.
i was a bit lazy and looked only for final code and didn’t notice the instructions with any code with them :slight_smile:
i will read everything with your example.