title: Prevent div block from moving when window resized
body: <p>I have a div block that overlays on top of its parent div, but when the window is resized, the child div moves around like crazy. How can I prevent that from happening. Here is the link to my site: <a href="http://raider.grcc.edu/~ryanduffing/recordstore/" rel="nofollow">http://raider.grcc.edu/~ryanduffing/recordstore/</a></p>
  
  <p>Here is the relevant CSS code, and HTML code:</p>
  
  <pre><code>            &lt;div id="overlayDescription" class="my_corner"&gt;
                  &lt;span id="overHeader"&gt;&lt;span id="chevron"&gt;&amp;#187;&lt;/span&gt;THE CORNER&lt;/span&gt;
                  &lt;span id="overHeader2"&gt;RECORD SHOP&lt;/span&gt;
                  &lt;p id="overContent"&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="pictureBox"&gt;
                  &lt;img src="img/storefront.jpg" /&gt;
              &lt;/div&gt;
  
  #pictureBox{
      margin-top: 10px;
      margin-left:auto;
      margin-right:auto;
      width: 940px;
      height: 420px;
      position: relative;
      z-index: 1;
  }
  
  #overlayDescription{
      font-size: 11px;
       position:absolute;
      top: 290px;
      right: 489px;
      height: 265px;
      border: 1px solid #FFFFFF;
      width: 240px;
      color: #FFFFFF;
      background-color:rgba(0,0,0,.9);
      z-index: 2;
      border-radius: 100px 0 0 0;
  }
  
  #overlayDescription span#overHeader{
      font-family: Arial Narrow;
      position:relative;
      font-size: 25px;
      left: 80px;
      top: 10px;
  }
  
  #overlayDescription span#chevron{
      position:relative;
      left: -5px;
      font-family: Arial Narrow;
      font-size: 35px;
      color: yellow;
  }
  
  #overlayDescription span#overHeader2{
      font-family: Arial Narrow;
      color: yellow;
      position:relative;
      top: 10px;
      left: 80px;
      font-size: 25px;
  }
  
  #overlayDescription p#overContent{
      position:absolute;
      padding-left: 25px;
  }
  </code></pre>