I'm trying to find out what is the best way to set up my footer on my website. I'm using the Ryan Fait's method but I'm wondering if the empty tag (class=push) is an issue.
I am not familiar with that method. Here how I am doing it lately. The container that holds the footer is relativly positioned and has a min-height:100%. The footer get positioned absolutely with bottom 0 and given height ex. 100px. Now the content div what goes inside the container gets padding bottom equal to height of the footer.
rodolpheb, I did a lot of research about css sticky footers too and I think Senff's recommendation of www.cssstickyfooter.com is a solid choice. When I first encountered it I didn't like the fact that I had to have the footer outsider of my main container--I like to wrap everything in one container, but I got over it. I was just holding onto something that I didn't really need to hold on to.
I use that sticky footer approach as I'm not willing to entertain a javascript option. It works on the browsers I've tested, including IE7. It works on mobiles.
If you have variable height footer, it can be problematic, but if you just need something to just work and be done with it, you may want to give it another look.
Simply put the padding on your last element in your wrap. Usually that would be a div. in the demo I have the padding equal to the height of the footer on the h1.
Hi,
I'm trying to find out what is the best way to set up my footer on my website. I'm using the Ryan Fait's method but I'm wondering if the empty tag (class=push) is an issue.
If you have any idea, thanks.
Nothing wrong with that method, or the empty tag, I'd say.
But you could also look into this one: http://www.cssstickyfooter.com
I am not familiar with that method. Here how I am doing it lately. The container that holds the footer is relativly positioned and has a min-height:100%. The footer get positioned absolutely with bottom 0 and given height ex. 100px. Now the content div what goes inside the container gets padding bottom equal to height of the footer.
@Senff,I already tried this method which is, according to my little experience more complicated than the one I mentioned.
rodolpheb, I did a lot of research about css sticky footers too and I think Senff's recommendation of www.cssstickyfooter.com is a solid choice. When I first encountered it I didn't like the fact that I had to have the footer outsider of my main container--I like to wrap everything in one container, but I got over it. I was just holding onto something that I didn't really need to hold on to.
I use that sticky footer approach as I'm not willing to entertain a javascript option. It works on the browsers I've tested, including IE7. It works on mobiles.
If you have variable height footer, it can be problematic, but if you just need something to just work and be done with it, you may want to give it another look.
Here is mine. It's basically like one of Paul obs. http://www.visibilityinherit.com/code/css-sticky-footer-demo.php
Simply put the padding on your last element in your wrap. Usually that would be a div. in the demo I have the padding equal to the height of the footer on the h1.
Thanks for your answers.
Here is what I came up with this morning. CSS3 Sticky Footer http://www.visibilityinherit.com/code/css3-sticky-footer.php
No more push divs. in fact no more anything. Just a we-bit of css and html.