Footer Not Sitting At Bottom Of The Page

I'm having issues with the footer on a site I'm making. It won't sit at the bottom. I know its a common complaint, but everything I've tried either hasn't worked or broke other CSS

Solution 1:

Because you have:

position: absolute;

on the class ".container"

Remove that and it should be under the div.container

Now that will cause your div.container to collapse because of the two floated elements inside. You will need a clearfix for that issue. You could add this to your "content" class.

.content:after {
  content: "";
  display: table;
  clear: both;
}

Solution 2:

here you can find some code as follows

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

In CSS:

height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

In HTML Body:

Your website content here.

<divclass="push"></div></div><divclass="footer"><p>Copyright (c) 2013</p></div>

Solution 3:

This is a common problem, and the best solution I've seen is this:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Basically you're putting all of your content in a div that has a minimum height of 100%, and that pushes the footer div to the bottom.