Footer not 100% bottom crossbrowser

Question

This is my first question here, so bare in mind that we may have some issues with code.

But the thing is that i'm using a template (Cant remember what template atm) that is supposed to work in every browser but i cant get the code to the bottom.

URL TO SITE IN 1 Comment.

I'm pasting the HTML & CSS with Pastebin for you people that don't wanna see the page.

Please bare in mind that the CSS is rough and not clean, same with the HTML as the page is under development.

I searched here a couple of times without result, and couldn't get it going without messing up the whole page.

I can only test this live on Safari in Yosemite, and on Chrome Win 7.

HTML and CSS

I think myself that it have with the bottom images to do with.

FYI: I don't own any of the logos and this is a non profit entuisasm project for F1 Simracing.

Thank you and kind regards.

Answer 1

U have really messed your code a lot..!

Do these changes, it will work perfectly. remove html,body {height:100%}

/**** add CSS ***/
html {min-height: 100%;position: relative;}
body {margin-bottom: 288px;}/* height of footer */
footer {position:absolute;width:100%;left:0;right:0;bottom:0;}

delete that container tag from bottom of html page.

Answer 2

Alright, I got the footer to the absoulte bottom of the browser (Safari atm)

But the content gets hidden behind the footer, and thats no good.

Attaching image and code Screenshot CSS

Im really sorry for the messy CSS, but i really appreciate all help!