title: How to get the navigation bar fixed to the bottom instead of the top
body: <p>The problem here is that my navigation bar is <code>fixed</code> to the top and I would like for it to be <code>fixed</code> to the bottom:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;center&gt;
  &lt;h1&gt;My Resume&lt;/h1&gt;
  &lt;link rel="stylesheet" type="text/css" href="csstrial.css"&gt;
  &lt;center&gt;
  
  &lt;div id="nav"&gt;
  &lt;p class="title"&gt;&lt;a href="#"&gt;TheCodePress&lt;span class="subtitle"&gt;.blogspot.com&lt;/span&gt;              &lt;/a&gt;&lt;/p&gt;
  &lt;ul id="navigation"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;My Blog&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Tutorials&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Downloads&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="home.html" target='MYHOME'&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="cmon.html" target='MYHOME'&gt;Qualifications&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  
  &lt;iframe src="home.html" name="MYHOME" height="550" width="700"
  frameborder="0"&gt;
  </code></pre>
  
  <p>And This is My CSS</p>
  
  <pre><code>#nav
   {
   background-color:#262626;
   width:100%;
   height:50px;
   box-shadow: 0px 1px 50px #5E5E5E;
   position:fixed;
   top:0px;
  }
  
  .title
   {
   color:#EDEDED;
   font-family:verdana;
   font-size:25px;
   width:350px;
   margin-top:6px;
   margin-left:150px;
   font-weight:bold;
   float:left;
  }
  .subtitle 
  {
   color:#EDEDED;
   font-family:verdana;
   font-size:15px;
  }
  
  #navigation
  {
   list-style-type:none; 
  }
  li 
  {
   display:inline;
   padding:10px;
  }
  #nav a
  {
   font-family:verdana;
   text-decoration:none;
   color:#EDEDED;
  } 
  #nav a:hover 
  {
   color:#BDBDBD;
  }
  
  #body 
  {
   width:850px;
   margin:0px auto;
   margin-top:80px;
   font-family:verdana;
  }
  
  body 
  {
   margin:0px;
  }
  </code></pre>
  
  <p>I've tried many times to change the position, but failed. Any ideas on how to do it?</p>