Member Avatar for agr8lemon

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;
}
  • 5 Contributors
  • 9 Replies
  • 317 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by BMXDad

Dani AI

Generated

Quick summary: the centering was actually fixed by the old IE “text-align:center on the page” workaround that suggested (and confirmed). That trick makes inline/inline-block boxes appear centered in older IE/quirks modes, but it’s a workaround rather than the root fix. A few cleaner diagnoses and fixes follow.

Why it happens (brief): when IE is running in quirks/compatibility mode or when the layout of the wrapper/children is unusual (floated children not contained, child widths equal/greater than the wrapper, or old “hasLayout” issues), the normal left/right-auto centering can be ignored. The body text-align hack forces inline-layout behavior and so “looks” centered. It can, however, affect inline content and mask the real issue.

Cleaner fixes and checks

  • Ensure a standards DOCTYPE (for modern pages use <!DOCTYPE html>). That prevents quirks/compatibility-mode behavior.
  • Make sure the wrapper actually contains floated children (use a clearfix or give the wrapper a containing property). Example: use overflow or an IE hasLayout trigger to contain floats.
  • For legacy IE only: trigger hasLayout (e.g., zoom:1) so IE behaves like modern browsers.
  • Double-check child widths: no child should force the wrapper wider than its own declared width.
  • Don’t rely on padding: 0 auto; — padding does not use auto for centering (so ’s suggestion won’t center the box).

Practical snippets (safe, non-invasive)

<!DOCTYPE html>

#container { overflow: auto; }      /* contain floats in modern browsers */
#container { zoom: 1; }             /* legacy IE hasLayout trigger (if needed) */

/* alternate inline-block approach if older IE hacks are required */
#container-inline { display:inline-block; *display:inline; zoom:1; text-align:left; }

Troubleshooting checklist: validate markup (no stray/mismatched tags), confirm the page isn’t in IE Compatibility View / quirks mode, simplify to a minimal test case (wrapper + one floated child) and iterate. These steps remove the need for page-wide text-align hacks while giving consistent cross‑browser centering.

Recommended Answers

All 9 Replies

Member Avatar for agr8lemon

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>

Edited by agr8lemon because: n/a
Member Avatar for Crionly

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

Member Avatar for MJ Pieterse

you need to create a body class in your style sheet

body {
   text-align: center;
}
Member Avatar for agr8lemon

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

Member Avatar for agr8lemon

Sorry, my mistake, that did fix it.

Thank you very much.

Member Avatar for MJ Pieterse

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

Member Avatar for MJ Pieterse

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

Member Avatar for BMXDad

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.