[CSS] Allowing my footer to be aligned to the bottom.

[cunning]

#footer{
width: 1024px;
margin: auto;
overflow: visible;
height: 262px;
background: url(images/sg_01.gif) no-repeat bottom;
position: relative;
bottom: 0px;
left: 0px;
clear: both;
}

Honest, I couldn't figure it out and I just started adding on and taking off.
What I want is my footer to be at the bottom of the page, no gaps.

All I really want is my image at the bottom of the page, it could be from the background or div....

I tried position: relative; but it made the content stop and took over the portion of the page.

If you have any variations of this let me know. I guess I need to broaden my skills, because I am clueless.

[Meti]

remove position, and bottom.
Add: margin-bottom: 0px;

[cunning]

Thanks for the reply, I think I had it like this before.

I was trying to get it to be able to actually touch the bottom of the page. So for smaller pages it wouldn't move up but just stay the same.

Thank you for the reply.

[cunning]

I meant to clean up the css, that first post me playing to find a solution in css.

#footer{
width: 100%;
height: 262px;
background: url(images/sg_01.gif) no-repeat;
margin-bottom: 0px;
}

[Iszak]

You might be looking for this - http://ryanfait.com/sticky-footer/

[cunning]

Exactly what I was looking for, thanks!

[Cushioned]

To keep something on the bottom don't you put:

position: absolute;
bottom: 0px;

???

[Meti]

No Dylan.
You use "margin-bottom: 0px;" and "clear: both;" & "overflow: hidden;"

But Ryan Fait says:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/