Aligning div in center of page horizontally in IE

**wood_tah** · 06-22-2004 02:14 PM

How do you align a div horizontally in the center of a page in IE? I know that this is done easily in Mozilla browsers by setting the left and right margins to auto, but is there a simple way that will work for IE as well? I know about setting left to 50%, and then a negative left margin that is half the width of the div you are centering, but I was wondering if there is an easy, simple way to center a div for both IE and Mozilla browsers.

**Sam** · 06-22-2004 02:17 PM

ie 6 will do it with auto margins if you are in a strict enough doctype. Other versions you have to apply text-align:center to the parent.

**wood_tah** · 06-22-2004 02:39 PM

I tried changing my DTD to Strict, but I still had no luck....

This is the DTD I am using:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And this is the code I am using for the div (the portion commented out worked for both IE 6 and Mozilla browsers, as it is now only works for Mozilla browsers):

PHP Code:


div#msgBox {

    border: 2px solid #000000;

    height: auto;

    min-height: 1em;

    width: 600px;

        position: relative;

    padding: 1em 2em;

    /*margin-left: -300px;

    left: 50%;*/

    margin-right: auto;

    margin-left: auto;

}

Do you notice something that I happen to be missing someplace?

**Sam** · 06-22-2004 03:07 PM

that should work... how about the full source?

**wood_tah** · 06-22-2004 03:32 PM

Full source is below....

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
div#msgBox {
	border: 2px solid #000000;
	height: auto;
	min-height: 1em;
	position: relative;
	padding: 1em 2em;
	width: 600px;
	/*margin-left: -300px;
	left: 50%;*/
	margin-right: auto;
	margin-left: auto;
}

.myClass {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
	text-align: center;
}

#botRightText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	width: auto;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 0.25em;
	margin-bottom: 0.25em;
	text-decoration: underline;
	color: #000000;
}
</style>
</head>

<body>
<div id="msgBox" class="myClass">
	Sample text in my message box. 
	<div id="botRightText">Text</div>
</div> 
</body>
</html>

**Fang** · 06-22-2004 03:35 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#text {text-align: center}
#alignment {text-align: left; margin: auto auto; width:60%;}
p {background:red;}
-->
</style>

</head>
<body>
<div id="text"><div id="alignment">
<p>contents</p>
</div></div>
</body>
</html>

**Sam** · 06-22-2004 03:57 PM

This:

Originally posted by wood_tah
<?xml version="1.0" encoding="iso-8859-1"?>

throws IE into quirks mode, lose it and IE6 will center it you'll still need the hack Fang showed you if you want IE5/IE5.5 to center.

**David Harrison** · 06-22-2004 07:19 PM

All you need to do is add these body styles in. I always use the xml decleration and if anything I find it helps that IE is in quirks mode, at least that way I don't need hacks to differentiate between IE5 and IE6:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Untitled Document</title>
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">/*<![CDATA[*/

body{
	text-align:center;
}

div#msgBox {
	border: 2px solid #000000;
	height: auto;
	min-height: 1em;
	position: relative;
	padding: 1em 2em;
	width: 600px;
	/*margin-left: -300px;
	left: 50%;*/
	margin-right: auto;
	margin-left: auto;
}

.myClass {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
	text-align: center;
}

#botRightText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: xx-small;
	width: auto;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 0.25em;
	margin-bottom: 0.25em;
	text-decoration: underline;
	color: #000000;
}
/*]]>*/</style>
</head>

<body>
<div id="msgBox" class="myClass">
	Sample text in my message box. 
	<div id="botRightText">Text</div>
</div> 
</body>
</html>

**TomDenver** · 06-22-2004 11:26 PM

Originally posted by lavalamp
I always use the xml decleration and if anything I find it helps that IE is in quirks mode, at least that way I don't need hacks to differentiate between IE5 and IE6:

Damn good idea, I gotta try that. So throwing IE6 into quirks mode makes it render identically to IE 5? Or pretty close to it? Is it still valid XHTML to do this?

**David Harrison** · 06-23-2004 10:44 AM

They don't always render the same, but at least when IE6 is in quirks mode they have the same crappy box model. Saves any confusion.

Thread: Aligning div in center of page horizontally in IE

Thread Tools

Display

Aligning div in center of page horizontally in IE

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions