title: Absolutely positioning images inside relatively positioned div
body: <p>I've seen several posts related to this issue, but still can't get the following to work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    position: relative;
    width: 100%;
  }
  
  .left {
    position: absolute;
    left: 0px;
  }
  
  .right {
    position: absolute;
    right: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;img src="..." class="left" /&gt;
      &lt;img src="..." class="right" /&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>According to <a href="http://www.w3schools.com/css/css_positioning.asp" rel="nofollow noreferrer">http://www.w3schools.com/css/css_positioning.asp</a>, specifically the line that says:</p>
  
  <blockquote>
    <p>An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is &lt;html&gt;</p>
  </blockquote>
  
  <p>The issue is that the container div has no height. I'd really like to not have to specify the height of the container div. I know that floating the one image left, and the other image right, and setting overflow: auto on the container div will work, but I guess I was hoping to not have to go that route since I like the technique of absolute positioning inside a relative div. </p>
  
  <p>Is this possible?</p>