An issue with centering divs and making the footer sticky

I'm trying to make an HTML5 page with centered wrap div and a centered sticky footer. Here's my HTML:

<body>
  <div id="wrapper">
    wrapper
  </div>
  <footer>
    this is footer
  </footer>
</body>

And this is my CSS:

#wrapper {
width:800px;
height:100%;
padding:5px;
margin:0 auto;
background-color:#fff;
border-radius:10px 10px 0 0;
box-shadow:0 1px 10px 3px #666;
}

footer {
background-color:#060318;
color:#3cc9e7;
width:800px;
padding:5px;
position:fixed;
bottom:0;
}

And this is the result I get: enter image description here

How can I make them both be centered and the footer to be sticky?

Solution

I am not sure if it's the best solution, but: You could create a div inside your footer and center this div:

<footer>
    <div>this is footer</div>
</footer>

And here's the CSS:

footer {
    position:fixed;
    bottom:0;
    left: 0;
    right: 0
}

footer div {
    background-color:#060318;
    color:#3cc9e7;
    width:800px;
    padding:5px;
    margin:0 auto;
}

Here is a jsfiddle that shows the results: http://jsfiddle.net/xRzQy/