[Solved] Make a footer get down where it belongs!

[ianahner]

Okay guys, I’m fighting this one to no end.

How can I make my footer stick to the bottom? All the normal methods of setting position:absolute is messing up the footer.

[MOD EDIT – Codedump Removed]

[Paulie_D]

Please don’t drop a bunch of code on us like that. It’s rarely useful without the accompanying HTML, usually incomplete and hard to read and takes up way to much space on the thread.

Please create a Codepen.io example so show us the problem.

Thanks.

[ianahner]

Sorry!!!

Can you point me towards a bit of info on how to accomplish that? You’re speaking greek now. I play with html/css but this forum stuff is new to me.

Thanks!

[Paulie_D]

Go to Codepe.io and create a new ‘pen’

You will find sections for HTML, CSS & JS…put your relevant code in there, just enough to show the issue…save it and post a link here.

This is a little old…but useful – https://css-tricks.com/forums/topic/a-guide-to-using-codepen-help-us-help-you/

Easy really.

[ianahner]

http://codepen.io/anon/pen/plEDF

I trimmed out all of my middle text and columns and such in the html.

I left the full CSS because I do not know if something that I think is irrelevant might be the cause of my distress. The CSS is very short and simple though.

I also set the background to black. It is originally an image of a textured color, but the text is all light, so I just set the background to black to make it show up. I don’t think that should change anything.

I just can’t get my footer to stay at the bottom without messing up the width of my shell or making the footer reformat all weird…

Sorry about the inappropriate blob of obnoxious code earlier… Now I know… Thanks for the help!

[ianahner]

Try THIS link.. the last one tried to imbed

[ianahner]

Thats EXACTLY what I was looking for!!!!

Now I just have to dig around to find what you changed..

[ianahner]

Wow, now I feel like a moron. When I added the position:absolute it made the footer all odd. I didn’t think to re-specify the width again. Why does it not automatically inherit the width of the shell?

Now this is what is weird:

I copied identical code over to my server, and it isn’t rendering the same way in chrome. In chrome it is exactly the same as before, and it crunches the footer right up under the content.

[ianahner]

Doh… Now I’m a real fool. I was using a standard refresh…

Now my next question may be asking for too much.

Suppose I wanted it so that if they were to resize the window too small for the content, THEN the footer was pushed down to the bottom of the content. If their window is larger, the footer stays at the bottom as it does right now.

Currently, if the text runs off the page, the header covers the text. Any ideas?

[ianahner]

If the page content is too long and requires a user to scroll down, the footer gets superimposed over the top of the scrolling content. I want it to be pushed to the bottom of the content even if that is off of the page.

If the text is shorter than the page I want it to sit at the bottom of the page, but I want it BELOW the page content no matter what else happens.

[ianahner]

For more detail, when the page loads, if the footer loads over the top of the content, when you scroll up, the footer scrolls up too… The footer should reside at the bottom of the content, but never ABOVE the bottom of the page.

Does that make any more sense?

[Paulie_D]

So what you actually want is a sticky footer.

Search for it on CSS-Tricks…it’s a thing.

[ianahner]

Hard to search when I didn’t know the search term… I’ll look for sticky footers…

[Author]

Posts