title: How to keep image fixed at bottom right
body: <p>I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right. </p>
  
  <p>I have tried </p>
  
  <pre><code> position:fixed;
   bottom:0;
   right:0:
  </code></pre>
  
  <p>however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (<a href="http://i.imgur.com/FZoaLd0.jpg" rel="nofollow">http://i.imgur.com/FZoaLd0.jpg</a>) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.</p>
  
  <p>sorry if this is confusing! I am still a newb at this. </p>
  
  <pre><code>    &lt;div id="footer"&gt;
  &lt;img src= "images/swirlfooter.png" width="75%" height="75%"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?</p>