need footer pushed to bottom of page

[ashapanka]

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 */
}

#footer {
color: #ffffff;
float: right;
text-align: right;
bottom: 0px;
}

#footer, .push {
height: 42px; /* .push must be the same height as .footer */
}

[ashapanka]

note: “footer, .push” should be “#footer, .push”

[Kitty Giraudel]

I’d go with absolute positioning. It seems accurate to me in your case.

#footer {

position: absolute;

left: 0;

right: 0;

bottom: 0;

}

[chrisburton]

@HugoGiraudel Wouldn’t that put the footer at the bottom of the browser window, not below the content?

[Kitty Giraudel]

Isn’t that the point?

[ashapanka]

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.

[Kitty Giraudel]

Then I confirm: I’d go with position: absolute.

[chrisburton]

@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

[ashapanka]

look at this, you’ll see the problem: http://jsfiddle.net/sNtxg/

[ashapanka]

bingo! http://grab.by/gLum is what I need…I can’t have my footer overlap content.

[chrisburton]

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.

[Paulie_D]

You need to add 100% height to the body and html.

http://jsfiddle.net/Cxddw/1/

[ashapanka]

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?

[Paulie_D]

It’s working in the Fiddle so something else must be going on.

Without seeing a live site it’s difficult to comment.

[ashapanka]

I understand. I did some research and it looks like adding “clear: both; ” to the footer might fix my problem.

[Author]

Posts