Hello all! I am having the most annoying problem with my site. I have wrapped the entire body in a <div id="container> and everything is margin auto. Not sure why it doesn't seem to center the header or the top content divs. I've also tried setting <div id="header"> and <div id="topContent"> with margin auto but no luck. Any ideas, here's my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Biography</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="promo"><img src="" alt="" name="promotemp" width="150" height="120" id="promotemp" style="background-color: #999999" /></div>
<div id="header">
<div id="logo1"><img src="images/superman logo.png" width="331" height="241" /></div>
<div id="logo2">
<p>KRYPTO</p>
<p>COMICS</p>
</div>
</div>
<div id='cssmenu'>
<ul>
<li><a href='index.html'><span>Home</span></a></li>
<li class='active'><a href='biography.html'><span>Biography</span></a></li>
<li><a href='shop.html'><span>Shop</span></a></li>
<li><a href='comics.html'><span>Comics</span></a></li>
<li><a href='movies.html'><span>Movies</span></a></li>
<li><a href='games.html'><span>Games</span></a></li>
<li><a href='special.html'><span>Special</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
...And here is my css:
#container {
height: 1000px;
background-image: url(../images/Background.png);
width: 1200px;
margin-right: auto;
margin-left: auto;
}
#header {
height: 241px;
}
#logo1 {
height: auto;
float: left;
margin-right: auto;
margin-left: auto;
width: 50%;
}
#container #header #logo1 img {
}
#logo2 {
text-align: left;
font-weight: bold;
font-size: 28px;
font-family: "Comic Book Italic";
float: left;
}
#container #header #logo1 img {
float: right;
}
#promo {
height: 140px;
}
#container #promo #promotemp {
float: right;
}
body {
color: #000;
background-color: #000;
}