Search code examples
csshtmlnavigationcenter

CSS, Menu aligned in center of the bottom of the page


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;

I need to have my manu centered according to this page wrapper and placed at the bottom of the page.

This code does the placing to the bottom, but it doesn't align it to the center. Any ideas how to solve this?

[EDIT] Here is a fiddle http://jsfiddle.net/U2XpH/

It may look good at the first sight, but the problem can be seen when you stretch the result window (or the browser page).

HTML:

  <body>
    <div id="wrapper">      
      <!-- NAVIGATION -->
      <div id="navWrapper">
        <nav class="center">
          <ul>
            <li><a href="#" class="btn1">Option 1</a></li>
            <li><a href="#" class="btn2">Option 2</a></li>
          </ul>
        </nav>
      </div>   
  </body>

CSS:

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;
}

Correct fiddle here http://jsfiddle.net/U2XpH/1/


Solution

  • Try changing the #navWrapper CSS to this:

    #navWrapper {
    bottom: 1em;
    left:0;
    right:0;
    position: fixed;
    width: 850px;
    text-align:center;
    margin: 20px auto;
    }