Dundalk Web Designer Conor Darcy

Hello Conor,

This was really useful to me, thanks a lot. I am pretty good at css making a footer stick down the bottom with no weird gap between footer and content was my final hurdle. This template is the bees knees, thanks from Josh

I’ve downloaded the sample-tested this in Firefox and there is vertical scroll ….:(

Hi there, I found out another way to stick footer to the bottom of the page: something like this:
footer{
position: absolute;
bottom: 0px;
right;0px;
left: 0px;
}
Correct me if I am wrong.

My problem is that when the window minimizes, the footer comes up to block the content. How can I keep it so that the footer stays on the bottom, but also UNDER the body/content div?

The vertical scroll is caused by the default margin around <p> tags in Web Kit browsers like Firefox, Opera & Chrome. Just remove the 3 paragraphs in the html file to remove vertical scrolling. Or alternatively add p{margin:0} to the CSS.;…

If the content height exceeded the browsers height a white space appears between the content and the footer. The space is as tall as the footer/content padding. Thats the only problem I saw in this template. Other than that, this template was great, simple and functioning.

it works fine in IE but in chrome i am still getting that whit space between content and footer, even when i remove the padding

Can you take a look at the code on this page? I can’t seem to get the footer to stick to the bottom of the page. I’ve used what I believe to be your code here, but for some reason the footer still wants to ride up off of the bottom of the page. I’d appreciate any feedback you may have.

Here is the url to the page that I’ve applied your code to:

http://www.corvairflair.com/sarah-lamb/sarah-lamb-exhibitions.html

Thanks! This helped me with an SaS application I am working on. One suggestion is to add “clear: both” to the #footer div. Reason is because if any divs within #content have a min-height pixel amount set there are issues when the browser window height shrinks. For instance, if you have a footer of 200px high and divs nested inside of #content with a pixel amount of 650px, 650px + 200px = 850px. This is problematic when the browser window height is less than 850 pixels, the footer div indexes/appears underneath the nested divs of 650px. What should happen is the browser viewport adds scroll to the page, you can accomplish this with “clear: both;” on #footer.

Best Regards!

Oh and P.S: When you add “clear: both” remove the padding on the bottom of #content. because on larger screens where the content height is less than the browser viewport, the footer is below the fold and you have to scroll equal to the height of the footer just to view it. Kinda odd.

About what hideaky said.. ..what if you put “fixed” instead of “absolute” ..then there shouldnt be a problem with the content pushing trought it.. right?

footer{
position: fixed;
bottom: 0px;
right;0px;
left: 0px;
}

I think i had like a meltdown.. Yea sure if you just want the footer to stay down.. fixed instead of absolute would do it.. but if you want “content” to push the footer down.. then it wont do.. because, sure the footer stays down but the content would rush right under the footer..

Thanks for the “easy for even a newby to understand” tip! I was really trying to find something helpful. Cuz my coding ain’t that good (im a designer) all the tutorials elsewhere in this problem were somehow too difficult for me to put them working on my little project. So thanks a lot dude! you saved my day.

Your problem is position:absolute.
Just change it to “position:fixed;” in your .footer class.

it does not work in firefox and safari.It only works in IE.