I have some code for my header:

HTML Code:
<body>
<div id="header">
	<div id="logo">
		<h1><a href="http://www.mysite.co.uk">My site</a></h1>
	</div>
	</div>
<div id="header2">
	<div id="menu">
	<ul>
		<li ><a href="all.php">All</a></li>
		<li ><a href="womens.php">Women</a></li>
		<li class="current_page_item"><a href="mens.php">Men</a></li>
	</ul>
		<ul>
	</div>
</div>
And the CSS:

HTML Code:
#header {
    float: middle;
	padding: 0px 0 0 0;
	width: 340px;
	height: 70px;
	margin: 0px auto;
}

#header2 {
	padding: 20px 0 0 0;
	width: 620px;
	height: 70px;
	margin: 0px auto;
	text-align: center;
}

#logo {
	float: middle;
	padding: 20px 0px 0 0;
}

#logo h1 {
	margin: 0;
	text-transform: lowercase;
	letter-spacing: -0px;
	font-size: 3.6em;
	font-weight: normal;
	color: #FFFFFF;
}

#logo h1 a {
	padding-right: 20px;
	background: url(images/img02.gif) no-repeat right top;
	text-decoration: none;
	color: #FFFFFF;
}

#menu {
	float: middle;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: left;
	height: 82px;
}

For some reason the header appears fine on Opera and Firefox - centred. In IE(7) however its just left-aligned.. Any ideas why??? And how do I fix it so its just centred??

Thanks!