title: Static elements after position:absolute
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body style="margin:0;padding:0"&gt;
      &lt;div&gt;
          &lt;div style="border:3px solid red; width:70%; position:absolute; left:2.5%"&gt;Left&lt;/div&gt;
          &lt;div style="border:3px solid blue; width:25%; position: absolute; left:72.5%"&gt;Right&lt;/div&gt;
          &lt;div style="border:3px solid black; width:95%; margin: 0 auto"&gt;Bottom&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I am trying to achieve here is three divs layed out like this:</p>
  
  <pre><code>+---------------------------+--------+
  |Left                       |Right   |
  +---------------------------+--------+
  |Bottom                              |
  +------------------------------------+
  </code></pre>
  
  <p>However, with my markup the "bottom" div is overlapping with the "left" &amp; "bottom" ones.</p>
  
  <p>How should I style those 3 elements to achieve this effect?</p>
  
  <p>Note that "bottom" is not the last element on the page. I would simply like "left" and "right" to be in one line and for the page flow to continue with default positioning from the following lines.</p>
  
  <hr>
  
  <p><strong>EDIT</strong>: In addition to the accepted answer... If you don't have static heights or for some reason don't want to hardcode it, you can achieve similar effect with:</p>
  
  <pre><code>&lt;div style="border:3px solid red; width:70%; position:absolute; left:2.5%"&gt;Left&lt;/div&gt;
  &lt;div style="border:3px solid blue; width:25%; margin-left:72.5%"&gt;Right&lt;/div&gt;
  &lt;div style="border:3px solid black; width:95%; margin: 0 auto"&gt;Bottom&lt;/div&gt;
  </code></pre>