Absolute Footer Covers The Content

Question

I've set up a position absolute footer but it covers the content as more content is added.

I want it to be at the bottom of the page even if there is not enough content to push it down

Live Code

   <div id="wrapper">
       <div id="header"></div>
       <div id="content"></div>
       <div id="footer"></div>
    </div>

CSS

#wrapper{
  position: relative;
  min-height: 100%;
}
#content{
  width: 900px;
  margin-top: 20px;
}
#footer{
  width: 100%;
  height: 140px;
  position: absolute;
  bottom: 0;
}

Answer 1

I'm not positive this is exactly what you are looking for but hopefully this helps. If you want your footer to always be at the bottom of each page, whether there is enough content to push it down or not, you need what people call a "sticky" footer. You could probably find a few different ways to do it on Google but this is what I do, although it requires that you know the height of your footer div.

First take your footer div out of your wrapper, just put the div after your ending div tag that correlates for #wrapper. Then add padding-bottom:140px; box-sizing:border-box; to #wrapper in your css. Note that it is the same height as your footer, this is important! The box-sizing will tell your wrapper div that the padding should not be added to the 100% height, but instead taken away. This will make sure you don't get any scrollbars unless you actually have enough content to need them.

Second, take away position:absolute; bottom:0; clear:both; from #footer, you shouldn't need these anymore. Then add margin-top:-140px;

lastly, make sure you have these in your css: body{ height:100% } html{ height:100% }

Hopefully this works for you, what it should do is guarantee no overlap from the footer and your content, as well as make sure your footer always starts at the bottom of the page (unless you have more content to push it even further down).

Answer 2

It is a bit hard to give the right solution here, as maybe the content of #content may have a strong impact.
So far, with the code you provided, the only thing I would say is that your body has no height.
Indeed, most of included div are out of the flow (with position set to fixed or absolute).

So the only thing I would add to your css is

body{height: 100%;}

This should help your footer to be on the bottom of the page

EDIT

Now, to be sure that your footer will be displayed after #content, you can force its top to be at the bottom of the page with something like this

#footer{top: 100%; bottom: 0;}

From that point, you will be able to add some margin-top as well to your footer:

#footer{top: 100%; bottom: 0; margin-top: 20px;}