Why is my Footer is not Staying at Bottom of Page?

Question

For some odd reason my footer is showing up behind the content on my page, is not the right height anymore and I cannot seem to fix it. I have tried other answers and none of them work. This can be viewed here. Does anyone have any ideas?

 .reviewwidget { width: 45%; margin-bottom: 25px; float: left; } .reviews { width: 55%; float:right; } .single-review { position: relative; width:55%; float:right; } .quotation { position: relative; width: 50px; z-index:500; } .quotationend { position: relative; float:right; width: 50px; z-index:400; margin-top:-10px; } .single-review p { position: relative; z-index: 550; margin-top: -20px; font-size:16px; font-style: italic; } Footer { background-color: #0b1b23; color: #ececec; padding: 5%; font-family: centrale_sans_regularregular, helvetica; position:relative; } 

Answer 1

Your #container element has floated content, which isn't cleared, causing #container 's height to collapse. You should read up on floating and clearfix, but here are two solutions from this thread :

Reusable clearfix class to add to the #container element (recommended):

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

Quick and dirty:

#container { overflow: auto; }

Answer 2

The problem is in the floated elements. You have to put a clearfix block in your html code before footer element or add pseudo element with clearfix styles, like iqnivek said.

Answer 3

Its not that your footer is not staying on the bottom of your page. your class "single-review" has the property of float-right and it hovering over the footer (causing it to autoscale height).

try removing float right from .single-review and that will fix your footer.

But you will need to put your page content into a wrapper to keep your elements in place or everything will continue to pull out and overlap

Answer 4

Change your container as follows:

#container {   display: table-cell; }

This way it won't interfere with your footer placement.