Search code examples
htmlcssfooter

text runs into fixed footer

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

#footer
{
position: fixed;
clear:both;
text-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!

Solution

  • 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.)