title: CSS, Menu aligned in center of the bottom of the page
body: <p>I still can't aligned my navigation properly- to the center at the bottom of the page. The whole page is wrapped in a centered div called wrapper, which is of width: 850px;</p>
  
  <p>I need to have my manu centered according to this page wrapper and placed at the bottom of the page. </p>
  
  <p>This code does the placing to the bottom, but it doesn't align it to the center. Any ideas how to solve this?</p>
  
  <p>[EDIT]
  <strong>Here is a fiddle <a href="http://jsfiddle.net/U2XpH/" rel="nofollow">http://jsfiddle.net/U2XpH/</a></strong></p>
  
  <p>It may look good at the first sight, but the <strong>problem</strong> can be seen <strong>when you stretch the result window</strong> (or the browser page).</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;body&gt;
      &lt;div id="wrapper"&gt;      
        &lt;!-- NAVIGATION --&gt;
        &lt;div id="navWrapper"&gt;
          &lt;nav class="center"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" class="btn1"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="btn2"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;   
    &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body{
  height:100%;
  }
  
  body {
      min-width: 393px;    
      margin:0;
      padding:0;
      font-family:verdana,tahoma,sans-serif;
      font-size: 1.2em;
      line-height: 1.5em;
      background-color: #E3E3E3;
      background-image: url("../img/bg1.jpg"); 
      background-repeat: no-repeat;
      background-position: center center;
      background-attachment: fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;        
  }
  #wrapper {
    background: #DAFFDA;
    margin: 20px auto;
    padding: 30px 17px 10px;
    width: 850px;
  }
  #navWrapper {
    bottom: 1em;
    position: fixed;
    width: 100%;
    margin: 20px 0;
  }
  nav {
      min-width: 320px;
    position: relative;
      margin: 60px 0;
  }
  
  nav ul {
    margin: 0;
    padding: 0;  
  }
  
  nav li {
    margin-right: 1.5em;
    padding: 0;    
    list-style: none;
    display: inline-block;
  }
  </code></pre>
  
  <p><strong>Correct fiddle here</strong>
  <a href="http://jsfiddle.net/U2XpH/1/" rel="nofollow">http://jsfiddle.net/U2XpH/1/</a></p>