I have an image that I'd like to appear at the bottom-right corner of the page, but I'd like it to be positioned relative to the footer, not relative to the browser window. The problem is, the image is showing up in different places on each of my computer screens -- two of the three are running Firefox. Does anyone understand what I can do to ensure that the image displays in the SAME PLACE on every screen? Thank you!


The site is here.


HTML (placed at the end of the code just before <body>, which is outside the wrapper, and I suspect part of the problem:
Code:
<div id="footer-flag"><img src="http://www.p-is-for-party.com/blog/wp-includes/images/footer-flag.png"></div>
CSS:
Code:
#footer-flag {
position: relative;
width: 398px;
left: 650px;
top: -110px;
text-align: right;
}