Centering: Auto-width Margins

This box is horizontally centered by setting its right and left margin widths  to "auto". This is the preferred way to accomplish horizontal centering with  CSS, and works very well in most browsers with CSS2 support. Unfortunately,  IE5/Win does not respond to this method - a shortcoming of that browser, not the  technique.

There is a simple workaround. (A pause while you fight back the  nausea induced by that word.) Ready? IE5/Win incorrectly applies the CSS  "text-align" attribute to block-level elements. Declaring "text-align:center"  for the containing block-level element (often the BODY element) horizontally  centers the box in IE5/Win. There is a side effect of this workaround: the CSS  "text-align" attribute is inherited, centering inline content. It is often  necessary to explicitly set the "text-align" attribute for the centered box,  counteracting the effects of the IE5/Win workaround. The relevant CSS  follows.

body { 	margin:50px 0px; padding:0px; 	text-align:center; 	} 	 #Content { 	width:500px; 	margin:0px auto; 	text-align:left; 	padding:15px; 	border:1px dashed #333; 	background-color:#eee; 	}