Maybe margin-right and marigin-left? Can you update the page with the current code (using float: left) so I know how it looks right now?
Let me supply you with the code first, because when I try creating divs, it forces my navigation menu and the center graphic down and I'm not sure why.
CSS
@charset "utf-8";
/* CSS Styling */
* {
margin: 0;
padding: 0;
}
/* Styling the body */
body {
margin: 0;
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
background: url(images/body_bg.png) repeat-x top #c4c0bf;
}
/* Styling the Header */
#wrapper {margin: 0pt auto; background: url(images/header_bg.jpg) no-repeat center top; width: 920px; overflow: hidden;}
#header {
margin: 0 auto;
/*height: 68px;*/
height:75px;
/*width: 884px;*/
overflow: hidden;
}
#facebook {
}
#twitter {
}
#rss {
}
/* Styling the Footer */
#footer {
background: #292929;
font-size: 12px;
color: white;
padding: 5px 0 10px 0;
border-top: 2px solid #606060;
text-align: center;
}
/* Styling the Navigation Menu */
#nav_container {
margin: 46px auto 0;
width: 920px;
height: 29px;
}
ul { /* the unordered list */
height:/*25px*/ 100%;
text-align: center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: bold;
}
ul li {
display: inline; /* changing the display property */
height: 100%;
width: 115px;
float: left; /* floating the list items to the left */
list-style-type: none; /* disabling the list icon */
overflow: hidden; /* hiding the overflowing content */
}
ul li a {
text-decoration:none; /* removing the underline text-decoration */
display:block;
line-height: 29px;
height:100%;
}
/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:0px 5px;
display:block;
}
/* styles that are assigned individually */
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-29px;
background:url(images/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited {
color:white;
font-weight: bold;
background:url(images/dark_bg.gif) repeat-x #444444;
}
/* Styling the Main Content */
#main_container {
height: 540px;
/*width: 800px;
margin-top: 68px;*/
margin:0 25px;
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ruth Olson Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="nav_container">
<ul id="navMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">At A Glance</a></li>
<li><a href="#" class="normalMenu">About Us</a></li>
<li><a href="#" class="normalMenu">Gallery</a></li>
<li><a href="#" class="normalMenu">Senior Challenge</a></li>
<li><a href="#" class="normalMenu">Prices</a></li>
<li><a href="#" class="normalMenu">Contact Us</a></li>
<li><a href="#" class="normalMenu">Log-In</a></li>
</ul>
</div>
</div>
<div id="main_container">
</div>
</div><!-- end wrapper -->
<div id="footer">
<p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p>
</div>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ie6blocker.js"></script>
<script type="text/javascript" src="js/js_script.js"></script>
</body>
</html>