title: Bottom to top <ul> element arrangement
body: <p>I'm trying to find out how I can force  elements to start from the bottom going to the top.</p>
  
  <p>I have searched through stackoverflow and I can't seem to get the answer that i need.
  This picture should explain it:</p>
  
  <p><img src="https://i.stack.imgur.com/lpqDD.jpg" alt="explanation image"></p>
  
  <p>This should help too:</p>
  
  <pre><code>&lt;?php require("connectdb.php"); ?&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;jQuery Dynamic Drag'n Drop&lt;/title&gt;
  &lt;script type="text/javascript" src="javascript/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="javascript/jquery-ui-1.7.1.custom.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="javascript/jquery.ui.ipad.altfix.js"&gt;&lt;/script&gt;
  
  
  &lt;style&gt;
  body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      margin-top: 10px;
  }
  
  ul {
      margin: 0;
  }
  
  #contentWrap {
      width: 800px;
      margin: 0 auto;
      height: 500px;
      overflow: hidden;
      background-color: #FFFFFF;
      border: solid 2px #EEEEEE;
  }
  
  #contentTop {
      width: 600px;
      padding: 10px;
      margin-left: 30px;
  }
  
  #sortable { list-style-type: none; margin: 0; padding: 0;}
  
  #sortable li { margin: 20px 20px 1px 20px; 
  padding: 1px;
   float: left; 
   width: 70px; 
   height: 70px; 
   font-size: 12px;
   text-align: center; 
   background-color:#cfcfcf;
   position: absoute;
   bottom: 0;
   display: inline-block;
   float: right;
   }
  
  
  #contentRight {
      float: right;
      width: 300px;
      margin-top: 100px;
      padding:10px;
      background-color:#336600;
      color:#FFFFFF;
  }
  
  #save
  {    
      width: 100px;
      height: 30px;
      margin-right: auto;
      margin-left: auto;
      background-color:#336600;
      color:#FFFFFF;
      text-align: center;
  }
  .on { background-color:#000000; color:#782322; }
  
              #header{
                  background-color: #EEEEEE;
                  font-weight: bold;
                  width: 804px;
                  margin-left: auto ;
                  margin-right: auto ;
                  padding: 2;
              }
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript"&gt;
  //$(document).ready(function(){ 
  
  
  
      $(function() {
  
      $(document).bind('touchmove', function(e) {
          e.preventDefault();
      }, false);  
  
          $("#sortable").sortable({ opacity: 0.6, cursor: 'move', update: function()     {
              var order = $(this).sortable("serialize") +     '&amp;action=updateRecordsListings'; 
              $.post("updateDB.php", order, function(theResponse){
              });                                                              
          }                                 
          }).addTouch();
          $( "#sortable" ).disableSelection();
  
          //$("li").click(function(){
              //$(this).addClass("on");
          //});   
      });
  
  //});   
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;?php 
          session_start();
          $teacherID = $_SESSION['teacherID'];
          $classID = $_SESSION['csID'];
          $qryClass = "SELECT * FROM class_schedule WHERE csID = '". $classID ."';";
          $class = mysql_query($qryClass);
          while($row = mysql_fetch_array($class))
          {
              $subjCode = $row['subjCode'];
              $section = $row['section'];
              $semester = $row['semester'];
              $sy = $row['SY'];
              $time = $row['time'];
          }
      ?&gt;
      &lt;div id = "header"&gt;
          &lt;?php 
              //echo "What do you want to do, " .$fname . "?&lt;br&gt;";
              echo "Subject: " . $subjCode . " Block: " . $section . " -     Semester:" . $semester . " - SY:" . $sy . " - " . $time;
          ?&gt;
      &lt;/div&gt;
      &lt;div id="contentWrap"&gt;
              &lt;ul id="sortable"&gt;
                  &lt;?php
                  session_start();
                  $query  = "SELECT e.*, CONCAT(s.lname,', ', s.fname) name     FROM enrollment e, student s
  WHERE e.studentID = s.studentID AND e.csID = '". $classID ."' ORDER BY sort;";
                  $result = mysql_query($query);
                  $c = 0;
                  while($row = mysql_fetch_array($result, MYSQL_ASSOC))
                  {
                      //if($c != 4)
                          echo "&lt;li id='recordsArray_'"     . $row['id'] . "&gt;" . $row['name'] . "&lt;/li&gt;";
                  }
                  ?&gt;
              &lt;/ul&gt;       
  
      &lt;/div&gt;
      &lt;div id="save"&gt;
          Blackboard
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>