text runs into fixed footer

I have a fixed footer at the bottom of my page:

#footer
{
position: fixed;
clear:both;
tex开发者_如何学Pythont-align: right;
color:gray;
font-size:12px;
border-top: 1px solid #999; 
width: 900px;
bottom: 0px;
height: 30px;
}

But I didn't manage to prevent the text from running into the footer. For the text area I use this css:

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 30px 0em;
}

I already tried different margins and paddings but it seems like they have no influence on the behavior. The text always runs to the bottom of the page and overwrites the footer.

I found a lot of similar questions on the net but no answer which solved the problem for me.

Do you have an idea how i can prevent the text from running into the footer?

Thanks!

Since you footer position is fixed, it ignore the main content in positioning it. Thus, the main content can overlap. Try to put a opaque background on the footer and to put it in front of the main content (z-index)

#footer { background-color: white; z-index: 10 }
#content {z-index: 0}

The z-index represent which box is over the other (like photoshop layers e.g.)

your content already have 30px padding bottom it's all right. To fixe the footer and lets text go behind the footer just specifie z-index of your footer. try to add : z-index: 15;

#footer
{
position: fixed;
clear:both;
text-align: right;
color:gray;
font-size:12px;
border-top: 1px solid #999; 
width: 900px;
bottom: 0px;
height: 30px;
}

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 30px 0em;
}

I would probably not use the padding on the content. If you KNOW the height of the foot (e.g. they do on Facebook, where the fixed footer always has the same height), then I would give the #content a margin-bottom with that height + e.g. 10px.

And then - like the others said, I would use z-index (like the below example):

#footer { position: fixed; clear:both; text-align: right; color:gray; font-size:12px; border-top: 1px solid #999; width: 900px; bottom: 0px; height: 30px; z-index: 15; }

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 0 0;
  margin: 0 0 30px 0;
  z-index: 10;
}

Let me know if this worked for you!

add #content style - z-index that smaller than footers z-index add #content style - float:left and display:inline-block