title: Dynamic div from bottom of page - Javascript
body: <p>I want to insert a new div each time a new user is found in my database. I have the following code working if I change the CSS (remove "bottom" and "absolute" from the classes). The problem is that it starts at the top and each div is inserted below the previous one. I would like for the divs to be in the bottom left hand corner of the screen, and then move up when a new div is inserted. It would essentially push the existing divs up and the newest div would be at the bottom of the stack. Any ideas on how to do this? Any help would be appreciated. Thanks!</p>
  
  <p>This code will insert a new div, but it just places it on top of the previous one.</p>
  
  <pre><code>.greyBox {
      padding:8px;
      background: grey;
      margin-bottom:8px;
      width:200px;
      height:50px;
      bottom:0;
      position:absolute;
  }
  .redBox {
      padding:8px;
      background: red;
      margin-bottom:8px;
      width:200px;
      height:25px;
      bottom:1;
      position:absolute;
  }
  
  &lt;p&gt;
    &lt;button id="after"&gt;New User&lt;/button&gt;
    &lt;button id="reset"&gt;reset&lt;/button&gt;
  &lt;/p&gt;
  
  &lt;div class="greyBox"&gt;Users&lt;/div&gt;
  
  $("#after").click(function () {
       $('.greyBox').after("&lt;div class='redBox'&gt;User 1&lt;/div&gt;");
  });
  
  $("#reset").click(function () {
       location.reload();
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ymTtB/" rel="nofollow">http://jsfiddle.net/ymTtB/</a></p>