title: Position one image over another but where both move together when browser width adjusted
body: <p>I want to have two images. One over top of the other. The images must be centered horizontally within their div container and if the browser window width is adjusted, the image over top of the other remains in the same relative position over the one below it. I've tried a number of things but haven't had success. I can't even get either image centered horizontally either. Here is the basics:</p>
  
  <p><a href="http://jsfiddle.net/AndroidDev/gxpSX/" rel="nofollow">http://jsfiddle.net/AndroidDev/gxpSX/</a></p>
  
  <pre><code>&lt;div style="width:100%"&gt;
      &lt;div style="float: left; position:absolute; margin:auto"&gt;
          &lt;img src="http://www.majhost.com/gallery/shaucker/Requests/red_rectangle-489x328.png" /&gt;
      &lt;/div&gt;
      &lt;div style="float: left; position:absolute; z-index:3000"&gt;
          &lt;img src="http://www.avforums.com/forums/attachments/gran-turismo-ps3/206363d1286966503-gt5-wallpapers-artwork-dial-up-beware-yellow_buttonpsd.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>