title: How to make a scrollable div with dynamic content
body: <p>I am trying to add an image into my div inside bottom to top when I click the add button. Now it is working, but my problem was the div does not scroll. What I am doing wrong?</p>
  
  <p><a href="http://jsfiddle.net/4Ftev/5/" rel="nofollow"><strong>JSFiddle link</strong></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;button id="add_content"&gt;Add&lt;/button&gt;
   &lt;div class="image_panel"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  .image_panel {
       width:100%;
       height:300px;
       border:1px solid red;
       overflow-y:scroll;
    }
    #add_content{
       float:left;
    }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function() {
    var smallimg_count=0;
    var bottom=0;
    $("#add_content").click(function() {
      smallimg_count++;
      bottom=bottom+20;      
      var insert_html_small = '&lt;div id="imageGrid_' + smallimg_count + '"  class="imageGrid_small"  &gt;
                                 &lt;img class="resize1" id="resize_' + smallimg_count + '" src="http://webbies.dk/assets/templates/SudoSlider/images/toolbox_designer.png" style="bottom:' + bottom + 'px;" /&gt;
                               &lt;/div&gt;';
      $(insert_html_small).appendTo(".image_panel");
    });
  });
  </code></pre>