title: CSS how to postiton div outside main container without it moving over the container on window re-size?
body: <p>I have a sharebox(div containing social site links) that I've been using with a fixed position outside the main container. I realized that when I re-size the browser window by dragging the border it causes my sharebox div to move over the top of the container. </p>
  
  <p>I looked through related posts here but don't think they apply to this so sorry if I missed it somewhere.</p>
  
  <p>Here is an example of the problem: <a href="http://metrotechpc.net/test/positionedbox.html" rel="nofollow">http://metrotechpc.net/test/positionedbox.html</a></p>
  
  <p>Is there a way, preferably with pure css(no javascript) to make the div stay away from the container on browser window re-size so the user has to scroll over to see it?</p>
  
  <p>I've tried giving it padding, margin, different positions(absolute and fixed).</p>
  
  <p>I am actually inserting this code into the top of the page with genisis_hook function on a wordpress page so that may be an issue but getting it to work in a basic html like the example link would be a great help.</p>
  
  <p>Thanks</p>