title: margin align broken for different resolutions
body: <p>I am using two images in my site - one at top right and the other at center right.</p>
  
  <p><strong>Top right image css code</strong></p>
  
  <pre><code>.fbtopbutton{ position: absolute;top: 27px;right: 192px;}
  </code></pre>
  
  <p><strong>Center Right image css code</strong></p>
  
  <pre><code>#annoying-floater {
    z-index:10;
    position:fixed;
    top:80%; right:-45%;
    width:640px; height:480px;
    margin-left:-320px; margin-top:-240px;
  opacity: 0.8; /* css standard */
      filter: alpha(opacity=60); /* internet explorer */
  }
  
  #annoying-floater:hover {
  
  opacity: 1.0; /* css standard */
      filter: alpha(opacity=60); /* internet explorer */
  }
  </code></pre>
  
  <p>There are two problems:</p>
  
  <ol>
  <li>When a screen's resolution gets low, the images are coming into center of the page (on the content)</li>
  <li>With center right picture, when the mouse hovers under that pic it works like mouse hover on the pic.</li>
  </ol>