Footer won't stay at the bottom

HTML & CSS
1

Still a Newbie here …

I’m not sure what is wrong on this one. All the gallery pages show a scrollbar and I have a good inch or more below my footer. Can you see what is creating this?

It is fine on my home page, about me, and guestbook. So I am assuming it is the gallery container that is doing this … I just don’t see a way to take out the space?

I thought I had it so if my page did scroll that my footer would stay at the bottom and not ride up like it is doing on the gallery pages.

As I get my guestbook page up and running this would be a problem as that will eventually have a long scroll … and I need the footer to stay at the bottom.

http://kathykuczek.com

Thanks,
Kuczek

2

I realize part of my mistake now … the container height was way too long. I reset the background to white to check it and sure enough it was the culprit.
That has been scaled back from 700px to 555px.

#container {position relative; width:620px; height:555px; background:none; border:1px solid none; margin:-50px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

But I still need to keep the footer at the bottom for my guestbook page since that will indeed have a scrollbar.

Thanks,

Kuczek

3

Hi, before I begin, do you wnat a fixed footer or a sticky footer? I wasn’t able to quite follow what you want from your description :slight_smile:

4

Sticky Footer

I just found this site - http://www.cssstickyfooter.com

I’ll try this out tomorrow. Hopefully it will make some sense after some sleep.

5

Trust me when I say that that sticky footer isn’t the best :slight_smile:

This is :slight_smile:

6

As Ryan mentioned the only fully working sticky footer in the world today is the one Ryan linked to and documented in the FAQ here.

7

i would go with a fixed footer, sticky ones just get on every bodies nerves to be honest

8

I think I understand how you did it for your sticky footer example but I haven’t been able to incorporate your markup into my existing home page and CSS.

It just jumbles all my elements …

I guess I will start another test and try to see what I’m doing wrong …

9

So, can you give me the markup for a fixed footer?

I just want the footer to stay put where it belongs …

10

They don’t get on my nerves. :slight_smile:

Sticky footers do their job in the right place and have done since I created the original in 2003.

Fixed footers don’t work in IE6 so they are a lot more work if you want to support IE6.

Both have their uses in the right place just like many other elements :slight_smile:

The reason you can’t have a normal footer on your page is because you have used absolute positioning for your content and columns. Absolute elements are removed from the flow and you can’t place a footer under absolute columns. This also means you can’t use a sticky footer because the page has no flow and nothing for the element to foot. (Think of absolute elements as elements that don’t exist in respect to anything outside them on the page.)

With your current structure it is impossible for you to have any footer apart from a fixed positioned footer (as mentioned in the post above). However that means that IE6 will have no support and the footer will overlap other content. Usually you would float things and limit the use of absolute positioning where structural elements are concerned.

If you don’t care about IE6 then wrap your footer up in a div called something like this:


#foot {
    position:fixed;
    bottom:0;
    left:0;width:100%;
}

The only other thing you will need to do is to apply some padding to the bottom of the left and right columns equal to the height of the footer so that you will be able to scroll the content into view and not have it hidden behind the footer.

Hope that helps :slight_smile:

11

The only other thing you will need to do is to apply some padding to the bottom of the left and right columns equal to the height of the footer so that you will be able to scroll the content into view and not have it hidden behind the footer.

As far as padding goes … I don’t have any columns? (I think of columns as in tables) Do I just add padding beyond my last navigation bar on the left which would take care of all the gallery pages. Or just add padding to the last element on the page. I know it probably isn’t the proper way but would it work?

I just applied …#foot … to my home page.

#foot {
position:fixed;
bottom:0;
left:0;width:100%;
}

So now the footer will always show up on the bottom of the screen? I needed to scroll up to see the bottom of the image that was hidden under the footer. (I can make the footer more narrow so it hides less)

Although the thought of this is scary … would it be better to replace all the absolute positioning to floats?

12

You would need to add it to whatever element is nearest the bottom on each page.

Usually a page takes on a column structure and you stack content in each column. That would mean that you just add the padding bottom to the end of each column. However you page has no real structure as you are just placing things absolutely so you will just have to make sure the the last element on the page has enough padding so that it can scroll into view above the footer.

e.g.


.galleryphoto{padding-bottom:115px}

Although the thought of this is scary … would it be better to replace all the absolute positioning to floats?
I think you’ve gone too far with this design to change it now. As long as you can live with the way it’s working then it may be better to stick with what you have.

Usually though you would use floats and static positioning to lay out a page like that.