title: Moving a table within my div tag with CSS
body: <p>I have gotten my web page blocked out with CSS and here is the issue I am having, I want to just move the table of URL's to a more centered and lower position within the 'right' div tag.  the colors are just for differentiation of field. ignore the img links.</p>
  
  <p>This is the html code (for this assignment I am not allowed to use anything other than CSS and HTML. Below this code is the CSS file.</p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Town of Oz Info&lt;/title&gt;
          &lt;meta name="Zachary" content="Zachary Maltais" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="oz.css" /&gt;
          &lt;!-- Date: 2012-09-05 --&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;!--Using a div based layout to position things on the page --&gt;
  
          &lt;div id="header"&gt;
              &lt;!-- header code goes here --&gt;
  
              &lt;h1 id="welcome"&gt;Welcome to Town of Oz&lt;/h1&gt;
  
          &lt;/div&gt;
  
          &lt;div id="content"&gt;
              &lt;!-- All main content go here --&gt;
  
          &lt;/div&gt;
  
          &lt;div id="right"&gt;
              &lt;!-- right side of screen code goes here --&gt;
  
              &lt;!-- Table for navigation --&gt;
              &lt;table id="navigation"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;img src="images/arrow.gif"&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;img src="images/arrow.gif"&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;a href="events.html"&gt;Events&lt;/a&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;img src="images/arrow.gif"&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;a href="directions.html"&gt;Directions&lt;/a&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;img src="images/arrow.gif"&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;a href="weather.html"&gt;Weather&lt;/a&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;img src="images/arrow.gif"&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;a href="wizards.html"&gt;Wizards&lt;/a&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
  
          &lt;div id="left"&gt;
              &lt;!-- left side of screen code goes here --&gt;
          &lt;/div&gt;
  
          &lt;div id="footer"&gt;
              &lt;!-- footer code goes here--&gt;
  
          &lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>body {
      margin: 0px;
      padding: 0px;
  }
  #page {
      max-width: 950px;
      max-height: 720px;
  }
  
  #header {
      background: #ff9999;
      position: absolute;
      width: 950px;
      height: 100px;
      left: 0px;
      top: 0px;
  }
  #content {
      background: #9999ff;
      position: absolute;
      top: 100px;
      left: 200px;
      width: 750px;
      height: 550px;
  }
  
  #right {
      background: #ffff99;
      position: absolute;
      top: 100px;
      height: 550px;
      width: 200px;
      margin: 0px;
      padding: 0px;
  }
  
  #footer {
      background: #99ff99;
      position: absolute;
      top: 650px;
      width: 950px;
      height: 70px;
  }
  
  #navigation {
      position:absolute;
      top:200;
      left:50;
      border:dotted;
      border-color: black; 
  }
  #welcome {
      text-align: center;
      color: blue;
      font-style: oblique;
      font-size: 250%;
      font-family: "Perpetua";
      font-weight: bold;
  }
  </code></pre>