CSS Centering Problems - php

Question

I'm having problems with my site i am currently trying to redesign it.
The site: Link
This is my css style-power.css
/* main body style */
body {
background: #c7ff9a;
color: #000000;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
margin: auto;
text-align:center;
}
.container {
width:1800px;
}
.bodycentre {
text-align: center;
width:1300px;
vertical-align:middle;
margin-left:40px;
margin-right:40px;
font-family: Tahoma, Verdana, sans-serif;
}
.header {
text-align:center;
vertical-align:middle;
background:url(../images/powerplay.png) center top no-repeat;
height:150px;
width:1300px;
margin: -10px 0 0 0;
border-bottom:2px solid #ddd;
border-left:2px solid #ddd;
border-right:2px solid #ddd;
box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 15px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.menu {
position:relative;
float:left;
z-index:5001;
width:190px;
height:215px;
margin: 0 0 0 -305px;
border: 2px solid #ddd;
box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 15px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.footer {
text-align: center;
vertical-align:baseline;
position: relative;
width:1300px;
}
Problem is that when you go to the link above the .menu div is not there i have fiddled with the css but it just doesn't center. Also when it did center the problem i also had was that when you zoomed in with the java-script zoom the menu was partly of the screen and you could not scroll over to it.
This is the code for the index page:
<link rel="stylesheet" type="text/css" media="screen" href="../styles/style-power.css" />
<div class="container">
<div class="header"></div>
<br />
<br />
<div class="menu">
<ul id="nav">
<p align="left"><strong>Power Play Pro Shop</strong></p>
<li>Home</li><br />
<li><strong>Deals</strong><ul>
<li>Balls</li>
<li>Bags</li>
<li>Shoes</li>
<li>Combos</li>
</ul></li>
<br>
<li>Doubles Home</li><br>
<li>Admin Login</li></ul>
</div>
<div class="bodycentre">
<h3>Power Play Pro Shop</h3>
<p> </p>
<h1>Deals</h1>
<p>Special Deals for the Bowlplex Doubles 2011</p>
<p>Balls</p>
<p>Bags</p>
<p>Shoes</p>
<p>Combos</p>
<p> </p>
<h2>Staff</h2>
<p><img src="../images/players_8_1.jpg" alt="Steve Thornton" width="150" height="200" border="1" /></p>
<p><strong>Steve Thornton</strong></p>
<p> </p>
<p> </p>
<p>For Admin Access Click Here</p>
</div>
<br />
<div class="footer">
<p>© 2011 David Passmore (David Passmore Web Development)</p>
</div>
</div>
Any help would be appreciated,
Thanks Guys and Girls!

Answer 1

Put it into your CSS:
.container > *{margin:0 auto}
There are a few other problems too. meta , link and code for IE should be in head, not body.

Answer 2

try,
.menu {
position:relative;
z-index:5001;
width:190px;
height:215px;
margin:0 auto;
border: 2px solid #ddd;
box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 15px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
just i remove float:left; and margin:0 auto;
i don't why are you put float but i worked your fiddle link. menu going center the page.