title: How to adjust the position a table to the bottom inside a DIV?
body: <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .square
  {
   width: 200px;
   height:200px;
   background-color:#F99; 
  }
  
  #myimage {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
  }
  
  .table
  {
      position:relative;
      margin-top:80px;
  
  }
  &lt;/style&gt;
  &lt;script&gt;
  
  cc=1;
  function changeimage()
  {
  if (cc==0) 
    {
    cc=1;
    document.getElementById('myimage').src="images/white_contact.png";
    }
  else if (cc==1)
    {
    cc=2;
    document.getElementById('myimage').src="images/yellow_contact.png";
    }
    else if (cc==2)
    {
    cc=3;
    document.getElementById('myimage').src="images/red_contact.png";
    }
      else
    {
    cc=0;
    document.getElementById('myimage').src="images/green_contact.png";
    }
  }
  &lt;/script&gt;
  &lt;/head&gt; 
  
  &lt;body&gt;
  &lt;div class = "square"&gt;
  &lt;table border="0" class = "table" &gt;&lt;tr&gt;
  &lt;td width="51"&gt;Name:&lt;/td&gt;
  &lt;td width="141"&gt;&lt;input type="text" size="10"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Title:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" size="10"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Contact:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text" size="10"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;img id="myimage" onclick="changeimage()" border="0" src="images/white_contact.png" width="70" /&gt;
  
  &lt;p&gt;Click to turn on/off the light&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my code, I want to position my Table on the BOTTOM of my pink box, so that it would not be block by the image, no matter how hard I try to adjust my CSS, it seem to be at the bottom</p>
  
  <p>What should I do? Help me.</p>