Search code examples
csssticky-footer

position: fixed goes off of the screen

I am using position: fixed and bottom: 0 to affix something to the bottom of the screen. The name, however, appears to go off of the screen, on my 11" Air, and you can see the site here. I've posted my CSS code below for the div.
Broken JSFiddle: http://jsfiddle.net/MgdQv/

#credits {

    color: #363636;
bottom: 0;
padding-right: 10em;
text-align: right;
position: fixed;
width: 100%;
    opacity: 0;
    -o-transition:1.5s;
  -ms-transition:1.5s;
  -moz-transition:1.5s;
  -webkit-transition:1.5s;
  transition:1.5s;

}
#credits:hover {
    opacity: 0.8;

}
Solution

  • Add right: 30px (30px being the value of margin-right of parent body) and it should behave as expected.
    Edit: and maybe remove padding-right: 10em. Forgot that I had desactivated it in Firebug before answering...

    Also do not post link to a website: after you've fixed your problem, your question will become meaningless to future visitors of this question because the link will have changed... Please post relevant HTML and CSS reproducing your problem (and a fiddle)