I am having a hard time pushing my footer to the bottom of the page, and not having it depend on the amount of content. I tried http://ryanfait.com/sticky-footer/, but it didn't work. Below is my code, any help would be appreciated!
.container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -42px; /* the bottom margin is the negative value of the footer's height */
Sorry, I should have been more clear. I have many pages on this site with varying amounts of content (some a couple words, some long paragraphs). My goal is to have the footer below the content, and at the bottom of the page.
That's what I figured. I'm having the same issue on my upcoming site which I haven't been able to figure out as well. I hope someone else can help you.
Thanks! I actually already added this line to my css (forgot to mention it above) but the footer is still right below the content, rather than pushed to the bottom. Is there something that can be undoing this style?
I am having a hard time pushing my footer to the bottom of the page, and not having it depend on the amount of content. I tried http://ryanfait.com/sticky-footer/, but it didn't work. Below is my code, any help would be appreciated!
}
}
footer, .push {
}
note: "footer, .push" should be "#footer, .push"
I'd go with absolute positioning. It seems accurate to me in your case.
@HugoGiraudel Wouldn't that put the footer at the bottom of the browser window, not below the content?
Isn't that the point?
Sorry, I should have been more clear. I have many pages on this site with varying amounts of content (some a couple words, some long paragraphs). My goal is to have the footer below the content, and at the bottom of the page.
Then I confirm: I'd go with position: absolute.
@ashapanka Is it me that's not understanding what you're saying?
Do you want this: http://grab.by/gLuc
or this: http://grab.by/gLum
look at this, you'll see the problem: http://jsfiddle.net/sNtxg/
bingo! http://grab.by/gLum is what I need...I can't have my footer overlap content.
That's what I figured. I'm having the same issue on my upcoming site which I haven't been able to figure out as well. I hope someone else can help you.
You need to add 100% height to the body and html.
http://jsfiddle.net/Cxddw/1/
Thanks! I actually already added this line to my css (forgot to mention it above) but the footer is still right below the content, rather than pushed to the bottom. Is there something that can be undoing this style?
It's working in the Fiddle so something else must be going on.
Without seeing a live site it's difficult to comment.
I understand. I did some research and it looks like adding "clear: both; " to the footer might fix my problem.
Ah...well you didn't mention that there were floats involved. that's why a live link is always the best option for requesting help.
I agree, I wish I could have provided one!