Firefox CSS position issue

Question

I am having a problem with the positioning of a footer div which is supposed to pin everything within the div to the bottom of the page. It is working on Chrome, IE and Edge etc... But on firefox, this is problematic, as the div contents fail to stay at the bottom of the page.

I figured it would be easier for you to see this yourselves, so here is the link to the page in question for you to make judgements and hopefully help me with this.

You will see this word 'News:' fading in and out on the page.

http://goo.gl/xOg4uN

Here is the CSS, however:

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}

#main {
overflow:auto;
padding-bottom: 180px; /* must be same height as the footer */
}

#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;
} 

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

Answer 1

Since your #footer is relative to other divs and you are positioning your #footer by margin attributes, Firefox doesn't calculate as you expect it to do.

The below code should work for all browsers:

#footer{
  position: absolute;
  bottom: 0px;
}