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;
}

Recommended Answers

All 9 Replies

I forgot to post my html structure. I've removed all the content to just show the design.


<div id="container">
<div id="header">
<h1>
Stuff
</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
</ul>
</div>
<div id="content-container">
<div id="section-navigation">
<p>
Stuff
</p>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div id="content">
<h2>
Some Heading
</h2>
<table>
Table Content
</table>

</div>
<div id="aside">
</div>
<div id="footer">
Copyright © WWD HSHS, 2010
</div>
</div>
</div>

looked .... like all true ....

you need to create a body class in your style sheet

body {
   text-align: center;
}

Thanks for the ideas!
Unfortunately, adding the body tag did not fix the issue. :(

Sorry, my mistake, that did fix it.

Thank you very much.

mmm... maybe try adding the text align to your container?

woops..sorry! didn't see you said that it worked on your post below the one that it didn't work... hehe!

Try in container:

padding: 0 auto;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.