Forums

Hey Folks,

I have been a long timer reader of CSS-Tricks and have browsed the forums many times but have never been a registered user.

I have been experiencing some difficulties with implementing a sticky css footer for a website I am currently building, links are unavailable, however I will provide some code of what the html layout looks like.

The solution I have used in the past for sticky footers is this, however I am struggling to get the footer to behave the way I want with this design. Normally the div I have holding the content for the page has no background applied to it, however in this design the div of “main” has a background of white which is also the same div that has “padding-bottom” for pushing the footer down making the div higher at the bottom. Along with this when resizing the browser, the footer enters that same “main” div where the padding is and appears to be part of it.

I am unsure of how to fix this problem. The only other way which I have tried to resolve the problem is to place the padding on the “container” div but I don’t know if that is the correct way to get around this problem. I would ideally like to achieve no extra padding at the bottom of the main div and for the footer to not enter the div when the browser is resized. Is a sticky css footer necessary in this case or is there something else out there that will do the same job or different? If there is something I haven’t made clear enough, please let me know and I will provide additional information.

If anyone would be able to assist with this problem, it would be greatly appreciated.

Thanks in advance,
Giganic.

HTML

CSS

html, body {

height: 100%;

}



.wrap {

min-height: 100%;

}



.main {

overflow: auto;

padding-bottom: 100px;

background: #ffffff;

}



.footer {

position: relative;

margin-top: -100px;

height: 100px;

clear: both;

}