I have a very basic 3 column page that I would like to have centered. In every other browser that I've tested, it works fine, however, in IE it gets aligned to the left. Can someone take a quick glance and see what I'm missing?
Thank you!
/* CSS Document */
#container
{
margin: 0 auto;
width: 1000px;
background: #fff;
}
#header
{
background: #5A8CB3;
padding: 20px;
color: #FFFFFF;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 1000px;
background: #D7E5F0;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #000;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #5A8CB3; }
#content-container
{
float: left;
width: 1000px;
background: #fff url(images/back.gif) repeat-y 100% 0;
}
#content-container h2
{
text-align: center;
}
#section-navigation
{
float: left;
width: 160px;
padding: 20px 0;
margin: 0 20px;
display: inline;
}
#section-navigation ul
{
margin: 0;
padding: 0;
}
#section-navigation ul li
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
#content
{
float: left;
width: 500px;
padding: 20px 0;
margin: 0 0 0 30px;
}
#content h2 {
margin: 0;
}
#aside
{
float: right;
width: 200px;
padding: 20px 0;
margin: 0 20px 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer
{
clear: left;
background: #5A8CB3;
text-align: right;
padding: 20px;
height: 1%;
color: #FFFFFF;
}