title: Position 2 absolute DIV inside 1 relative DIV within bootstrap container
body: <p>I am trying to position 2 divs within 1 div inside a bootstrap container... One located top left and one located top right.</p>
  
  <p>I can get the one top left to sit where I want it to, but the bottom right one, when putting <code>right: 20px</code> sits to the right of the browser itself, and not within the container.</p>
  
  <p>Here is my HTML &amp; CSS:</p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;div class="container"&gt;
      &lt;div class="div1"&gt;
          Top left content
      &lt;/div&gt;
      &lt;div class="div2"&gt;
          Bottom right content
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  #header {
  height: 625px;
  position: relative;
  }
  
  #header .div1 {
  position: absolute;
  top: 20px;
  }
  
  #header .div2 {
  position: absolute;
  bottom: 20px;
  right: 20px;
  }
  </code></pre>
  
  <p>Any suggestions on how to get the bottom right div to sit to the right of the container and not the browser, would be greatly appreciated.</p>
  
  <p>Thanks</p>