title: Responsive design and position: absolute
body: <p>Is there any suggestion how do you work with position:absolute with responsive design?</p>
  
  <p>I have a design which is 1000px width, and left from that container div(1000px) I have image, positioned as position: absolute.</p>
  
  <p>Problem is, when I decrease width of browser I get horizontal scroll.</p>
  
  <p>What is the proper way with positioning absolute divs with responsive design?</p>
  
  <p>Edit: This is an example I am talking about <a href="http://jsfiddle.net/FeAUr/" rel="nofollow noreferrer">http://jsfiddle.net/FeAUr/</a> . For purpose of example I set container width to 100px, instead of 1000px.</p>
  
  <p>Point is, that I get horizontal scroll bar when I decrease width of my browser because of that "absolute" element with picture. How can I do it in proper way, that I wont get horizontal scroll bar?</p>
  
  <pre><code>&lt;div class="bggrey"&gt;
  
      &lt;div class="absolute-left"&gt;&lt;img src="http://placehold.it/200x200" /&gt;&lt;/div&gt;
      &lt;div class="row"&gt;content&lt;/div&gt;
  
  &lt;/div&gt;
  
  .bggrey{
      width: 100%;
   background: #999;   
      height:500px;
  }
  
  .row{
   width:100px;   
      height:500px;
      background: #fff;
      margin: auto;
  }
  
  .absolute-left{
      position:absolute;
      left:50%;
      margin-left:-300px;
      width:200px;
      height:100px;
  }
  </code></pre>