title: Navigation bar at bottom, centerd - CSS
body: <p>I need a quick tip how to manage with some problem. I've created a navi bar and center it so now its in the middle of page no matter how big or small is screen, but how to make that bar to stay on the bottom of page ? I know that when i add a <code>height</code> to <code>.MainContainer</code> it push that bar to the bottom but i want to make it dependless of constant height. Big thanks for any advice!</p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;  
  &lt;body&gt;
      &lt;div class="MainContainer"&gt;
      &lt;/div&gt;  
      &lt;div id="MenuContainer"&gt;
          &lt;ul id="navigation"&gt;
              &lt;li class="x"&gt;&lt;a title="1" href="indexX-1.html" &gt;1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="x"&gt;&lt;a title="2" href="#" &gt;2&lt;/a&gt;&lt;/li&gt;
              &lt;li class="x"&gt;&lt;a title="3" href="#" &gt;3&lt;/a&gt;&lt;/li&gt;
              &lt;li class="x"&gt;&lt;a title="4" href="#" &gt;4&lt;/a&gt;&lt;/li&gt;
              &lt;li class="x"&gt;&lt;a title="5" href="#" &gt;5&lt;/a&gt;&lt;/li&gt;
              &lt;li class="contact" class="last"&gt;&lt;a title="6" href="#" &gt;6&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.MainContainer {
      width: 1200px;
      background-color: #0066CC;
  }
  .MenuContainer {
      height: 70px;
      bottom:0;
  }
  ul#navigation {
      height: 70px;
      list-style: none;
      margin: 0;
      padding: 0;
      border: 1px solid #ccc;
      border-width: 1px 0;    
      text-align: center;
      font-size: 22px;
      font-family: 'Cham-WebFont', Arial, sans-serif;
      background-color: #FFF;
  }
  ul#navigation li {
      display: inline;
      margin-right: .75em;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  ul#navigation li.last {
      margin-right: 0;
  }
  </code></pre>