title: position div to bottom of visible container with hidden overflow
body: <p>I have a div which contains an image. The idea is that the user will be able to press a button and the div expands to a specific height. So what I did was set the height of the container to <code>200px</code> while the image has a height of <code>400px</code>. I want to add a little button to the bottom right of the container. </p>
  
  <p>The problem is that the button appears underneath the image.</p>
  
  <p>So my question is, how do I have the button <code>div</code>  stick to the bottom of the container it is in?</p>
  
  <pre><code>.visual {
      padding: 0;
      background: #EEEEEE;
      height: 200px;
      overflow: hidden;
  }
  
  .pull-down-button {
      float:right;
  }
  
  .visual img {width: 100%}
  
  &lt;div class="visual"&gt;
      &lt;img src="http://placehold.it/800x400" /&gt;
      &lt;div class="pull-down-button"&gt;some text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's a fiddle:
  <a href="http://jsfiddle.net/n3zkov64/4/" rel="nofollow">http://jsfiddle.net/n3zkov64/4/</a></p>