[Solved] Dealing with footers

[dcp3450]

OK guys, I’ve had a common issue that I’ve never been able to completely solve:

I have a div labeled footer that I want to stay at the bottom of the page but I want it to move down as content grows. If I position it as fixed content will scroll behind the footer, i if I position it as absolute the footer will show at the bottom of the page but as content grows the content goes behind the footer and the footer scrolls instead of staying attached to the lowest point and moving down with the text. If I use relative the footer has a big gap below it until the content pushes the footer to the bottom of the screen.

I want the footer to stay at the bottom even with no content, once content grows to the point where scrolling is needed the footer moves down with the content. I have never found a good solution to this issue. I’ve tried searching for it but I cant find the best keyword combo.

concept in code:

Code:

Code:

body
{
margin: 0;
padding: 0;
}
#blue
{
background: #ffffff url(images/blue.png) repeat-x top left;
width: 100%;
height: 316px;
margin: 147px 0 0 0;
padding: 0;
}

#footer
{
position: relative;
background: #ffcf01 url(images/gold.png) repeat-x top left;
width: 100%;
height: 102px;
bottom: 0;
padding: 0;
}

.content
{
width: 100%;
}

This will cause the footer to but up against the content. as content grows the footer moves down. I wan the footer to stay at the bottom until the content fill in the available space then start to move down.

Make sense? Any ideas?

[AshtonSanders]

I just saw another post from someone working on this. I just searched Google and found there’s a couple people who have claimed to fix this. This one looks like it works well:

http://matthewjamestaylor.com/blog/keep … f-the-page

(I searched for "css footer at bottom of page")
[img]http://www.websitesinaflash.com/images/thumbsup.gif[/img]

[dcp3450]

That was a great find. it was an easy fix too. kinda feel stupid on this one. lol!

[creativeastro]

Thank you so much for this fix, I am definitely going to bookmark it for future use. I posted a topic last week sometime and tried out a few fixes but just couldn’t make it work until now.

[creativeastro]

It seems to have a problem though now, my footer will not move down when I have a lot of content.
http://olympiafitnesscentre.com/

How on earth do I solve this problem
I used the fix below first
http://ryanfait.com/resources/footer-st … m-of-page/
but that does not seem to help either. I took my footer out of the container for that fix but it still move up when content was less

[AshtonSanders]

You have to follow the tutorial exactly.

1) Put your Footer back into the Container Div.
2) add 162px of padding-bottom to the container div.
3) Remove "height:100%" from your container div.

That should fix it.

[creativeastro]

ok thank you, will let you know when I have tried.

[creativeastro]

Thank you so much it worked.

[AshtonSanders]

Excellent! [img]http://www.websitesinaflash.com/images/thumbsup.gif[/img]

[creativeastro]

Thank you.

I have one more problem, I managed to fix all other pages except one http://olympiafitnesscentre.com/tips.php I cannot get the footer to move down. What do I need to do?

[AshtonSanders]

Remove the Float: left from .TabbedPanels (line 30?)

When you float an element, it stops taking up space in your design, so it stopped pushing your footer down.

[Author]

Posts