Centering Divs

Hi i need some help.

There are divs in the center of my page. The header and footer are in a fixed position and are lined up perfect and stay constand even when scroling.

There are 2 center divs "sidebar" on the right and "Content on the left. How do I center them to take up 100% of the width. Right now they are on the right side and I can seem to shift them to the middle and saty even when resizing. Any help would be appreciated

Here is the Code with the CSS followning

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Header & Footer: Cross Browser</title>

<link href="../css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header-wrap">
<div id="header-container">
<div id="header">
<h1><img src="../images/title.png" title="Scentsy Candles" alt="" width="370" height="88" /></h1>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</div>
</div>
</div>
<div id="ie6pagewrap">
<div id="ie6pagecontainer">
<div id="container">
<div id="content">
<h1>Blah Blah Blah </h1>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla </p>

</div>
<div id="sidebar">

<h2 align="center">Scentsy Consultants Wanted in</h2>
<p align="center"><script src="http://www.google.com/jsapi" type="text/javascript">
</script> <script type="text/javascript" src="../Scripts/locate.js">
</script></p>
<p align="center"><span class="largetextCopy">Start a Candle Business</span></p>
</div>
</div>
</div>
</div>

<div id="footer-container">
<div id="footer">
<p class="copy">Home</a></p>
<p class="link">Sitemap</a></p>
</div>
</div>
</div>

</body>
</html>

--------------------------------------------

CSS

@charset "utf-8";
/* CSS Document */

body {
font: 62.5% Arial, Helvetica, sans-serif;
color: #666633;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}

h1, h2 {
color: #666633;
font-family: Tahoma, Arial, Geneva, sans-serif;
margin: 20px 0 10px;
}

h1 {
font-size: 2.5em;
}

p {
margin: 10px 0;
padding: 0;
}

blockquote {
font-style: italic;
}

#header-wrap {
position: fixed;
top: 0;
width: 100%;
overflow: auto;
}

#header-container {
height: 166px;
background: url(../images/h1.png) repeat-x left bottom;
}

#header {
width: 940px;
margin: 0 auto;
position: relative;
}

#header h1 {
color: #000000;
text-align: right;
width: 290px;
margin: 0;
position: absolute;
left: 30px;
top: 16px;
}

#header h1 em{
color: #FFFFFF;
font-size: small;
display: block;
}

#header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 39px;
right: -12px;
}

#header ul li {
float: left;
margin-right: 5px;
padding: 10px;
font-size: 12px;
}

#header ul li a{
color: #000000;
font-weight: bold;
font-size: 1.4em;
margin-right: 5px;
text-decoration: none;
}

#header ul li a:hover {
color: #666666;
}

#container {
width: 940px;
font-size: 1.4em;
overflow: auto;
margin-top: 0;
margin-bottom: 0;
padding-top: 166px;
padding-right: 0px;
padding-bottom: 55px;
padding-left: 0;
margin-right: auto;
}

#content {
float: right;
width: 625px;
}

#sidebar {
float: left;
width: 275px;
margin-top: 3px;
}

#footer-wrap {
position: fixed;
bottom: 0;
width: 100%;
overflow: auto;
}

#footer-container {
background: url(../images/footer-bg.png) repeat-x left top;
height: 40px;
}

#footer {
width: 940px;
margin: 0 auto;
color: #FFFFFF;
font-size: 1.2em;
position: relative;
}

#footer a {
color: #FFFFFF;
}

#footer p.copy {
position: absolute;
top: 5px;
left: 0;
}

#footer p.link {
position: absolute;
top: 5px;
right: 0;
}

Centering Divs

brnm98105

limbo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week