title: CSS: expand container div height according to the content whilst getting the inner div positioned at the bottom
body: <p>I'd like to get my div element expanding according to the content, whilst having the content sticking to the bottom of the container.</p>
  
  <p>I've came up with the following to stretch the container height, which is fine, but can't get the absolute position.
  As soon as I absolutely position the inner div to the bottom, the inner content get positioned in a bad way.</p>
  
  <pre><code>        &lt;div id="id1" class="subcontent-wrap2"&gt;
              &lt;div class="innerTextBox2"&gt;
                  &lt;h3 class="title2"&gt;Title&lt;/h3&gt;
                  &lt;div class="text2"&gt;Lorem ipsum dolor sit amet, consectetur     adipiscing elit. Etiam fringilla turpis nisl, sit amet faucibus turpis egestas non. Phasellus est urna, dapibus a dignissim non, cursus in risus. Aenean eu lorem odio. Fusce bibendum tristique purus, id consectetur tellus posuere non. Phasellus consequat tincidunt dui, eu vestibulum odio venenatis sed. Proin convallis fermentum purus, ac tempus libero sollicitudin et. Sed vel risus vitae dui sollicitudin ornare. Proin accumsan eget magna non cursus. Nulla sollicitudin dapibus bibendum. Suspendisse eleifend suscipit lacus in suscipit. Nullam interdum massa vitae nisi viverra, in porta ante aliquet. Donec diam urna, euismod vel lacus vitae, sagittis fermentum orci. Phasellus dictum erat orci, dapibus volutpat dolor dictum non. Curabitur dignissim sagittis elementum. Sed facilisis consectetur mi sit amet vehicula. Aliquam lacus risus, eleifend ut accumsan sed, viverra ut eros. Fusce sem risus, sagittis ut lorem id, condimentum ultrices ante. Aliquam vitae orci quam. Integer nec mi nec magna pulvinar sodales ut nec ipsum. Nullam nec nisi quis erat dictum consectetur sed sed lorem. Vivamus sodales turpis tempus diam mollis, quis tempor turpis hendrerit. Sed luctus interdum euismod. Aliquam sed sapien dictum lorem dictum faucibus. Sed ut risus vestibulum, feugiat elit ut, euismod elit. Vestibulum hendrerit odio ullamcorper lacus vestibulum feugiat.
                  &lt;/div&gt;
                  &lt;img src="images/graphic.jpg" class="boxPic" alt="...."&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.title2, .text2 { font-family: 'Open Sans', sans-serif; } 
  .subcontent-wrap2 { width: 464px; min-height: 250px; height: auto; overflow: auto; position: relative; text-align: left; }
  .innerTextBox2 { position: relative; width: 314px; left: 145px; border: 1px solid green; }
  .boxPic { width: 140px; height: 250px; position: absolute; bottom: 0; border: 1px blue solid; }
  .title2 { font-size: 18px; font-weight: bold; color: #fff; text-transform: uppercase; margin-bottom: 20px; }
  .text2 { font-size: 15px; color: #fff; line-height: 1.6em; position: absolute; bottom: 0; border: 1px solid purple; }
  </code></pre>
  
  <p>Whereas transforming the Inner div in absolute I can get the content align at the bottom, but as soon as the content is more than the container, the text overflow to the top without the container increasing its height.</p>