title: absolute positioned element does not fill container width
body: <p>I have a red line which I want to stretch horizontally within a div which is scrolled:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 
  .p
  {
      background-color: blue;
      overflow: auto; /* so that scrollbar appears */
      position: relative; /* this is required by the absolute positioning of the line */
  }
  
  .box
  {
      background-color: red;
      width: 100px;
      height: 100px;
      margin-left: 3000px; /* such that horizontal scrollbar appears */
  }
  
  .line{
      border-top: 1px dashed red; 
      position: absolute; 
      left: 0; 
      right: 0;
      top: 50px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='p'&gt;
      &lt;div class='box'&gt;&lt;/div&gt;
      &lt;div class='line'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is the line doesn't stretch once you scroll.</p>
  
  <p>Why isn't working and how to fix this?</p>
  
  <p>A solution which doesn't use JavaScript is preferable if possible, obviously.</p>
  
  <p><strong>UPDATED:</strong>
  Fiddle here:
  <a href="http://jsfiddle.net/mwznLh1p/" rel="nofollow">http://jsfiddle.net/mwznLh1p/</a></p>