title: Place div with overlapping images at the bottom
body: <p><strong>Edited for clarity:</strong></p>
  
  <p>I have some images which should overlap each other and be placed at the bottom of the fixed div, #all.</p>
  
  <p>The image's top and left values should dictate their position relative to their container. This allows them to overlap each other.</p>
  
  <p>That container should be placed at the bottom of #all.</p>
  
  <p>The problem is that the image_container div isn't going to the bottom.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="all"&gt;
    &lt;div id="left"&gt;
      &lt;div&gt;Some Text&lt;/div&gt;
      &lt;div id=image_container&gt;
        &lt;img style="left: 50px; top: 50px" src="https://thumb1.shutterstock.com/thumb_large/1148591/116239540/stock-vector-orange-icon-116239540.jpg"&gt;
        &lt;img style="left: 20px; top: 100px" src="https://thumb10.shutterstock.com/thumb_large/713587/111988943/stock-vector-icon-orange-111988943.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#all{
    width: 500px;
    height: 350px;
  }
  #left{
    float: left;
  }
  #left &gt; div{
    display: block;
  }
  #image_container{
    position: relative;
    bottom: 0px;
  }
  #image_container &gt; img{
    position: absolute;
  }
  </code></pre>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/Le9rats3/" rel="nofollow noreferrer">https://jsfiddle.net/Le9rats3/</a></p>