title: Align image to bottom of responsive container
body: <p>I'm trying to align images to the bottom of the container. However, as the site is responsive, when I change the window size the image moves up/down the container as it seems to be fixed a to a certain point on the page. </p>
  
  <p>Is there a way to fix the baseline of the image to the baseline of the container indefinitely? Essentially, the image is aligned to the bottom to begin with, but as the window contacts, the text forces to container to expand and I end up with white space below the image.  </p>
  
  <p>My CSS for the image div is as follows:</p>
  
  <pre><code>.floatbottom {
  
  height: 100%;
  position: absolute;
  bottom:0;
  width: 500px;
  
  }
  </code></pre>
  
  <p>CSS for parent container:</p>
  
  <pre><code>#box{ 
  
  height: auto;
  padding-top: 90px;
  padding-bottom: 90px;
  position: relative;
  
  }
  </code></pre>
  
  <p>HTML for image in container:</p>
  
  <pre><code>&lt;div id="box"&gt;
      &lt;div class="floatbottom"&gt;
          &lt;img src="/images/bottom.png"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas would be massively appreciated!</p>