/    Sign up×
Community /Pin to ProfileBookmark

Aligning div in center of page horizontally in IE

Copy linkTweet thisAlerts:
Jun 22.2004

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.

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@SamJun 22.2004 — 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.
Copy linkTweet thisAlerts:
@wood_tahauthorJun 22.2004 — I tried changing my DTD to Strict, but I still had no luck....

This is the DTD I am using:

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


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):

[code=php]
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;
}
[/code]

Do you notice something that I happen to be missing someplace?
Copy linkTweet thisAlerts:
@SamJun 22.2004 — that should work... how about the full source?
Copy linkTweet thisAlerts:
@wood_tahauthorJun 22.2004 — Full source is below....

<i>
</i>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;style&gt;
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;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="msgBox" class="myClass"&gt;
Sample text in my message box.
&lt;div id="botRightText"&gt;Text&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@FangJun 22.2004 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;center contents&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;style type="text/css"&gt;
&lt;!--
#text {text-align: center}
#alignment {text-align: left; margin: auto auto; width:60%;}
p {background:red;}
--&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="text"&gt;&lt;div id="alignment"&gt;
&lt;p&gt;contents&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@SamJun 22.2004 — This:
[i]Originally posted by wood_tah [/i]

[B]<?xml version="1.0" encoding="iso-8859-1"?>[/B][/QUOTE]
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.
Copy linkTweet thisAlerts:
@David_HarrisonJun 23.2004 — 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:&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="content-script-type" content="text/javascript" /&gt;
&lt;meta http-equiv="content-style-type" content="text/css" /&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;style type="text/css"&gt;/*&lt;![CDATA[*/

[color=red]body{
text-align:center;
}[/color]

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;
}
/*]]&gt;*/&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="msgBox" class="myClass"&gt;
Sample text in my message box.
&lt;div id="botRightText"&gt;Text&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@TomDenverJun 23.2004 — [i]Originally posted by lavalamp [/i]

[B]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:[/B][/QUOTE]

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?
Copy linkTweet thisAlerts:
@David_HarrisonJun 23.2004 — 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.
×

Success!

Help @wood_tah spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...