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;
}

score 0 · Answer 1 · edited May 23 '17 at 12:06

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; }

score 0 · Answer 2 · answered Mar 22 '15 at 19:22

0

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.

answered Mar 22 '15 at 19:22

waka

23
3

score 0 · Answer 3 · answered Mar 22 '15 at 19:24

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

score -1 · Accepted Answer · answered Mar 22 '15 at 19:20

-1

Change your container as follows:

#container {   display: table-cell; }

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

answered Mar 22 '15 at 19:20

Akoben

235
1
10

Those of you who have downvoted this answer, care to explain what's wrong with my solution? – Akoben Mar 24 '15 at 08:38

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

4 Answers4