Okay, this seems like an insanely simple question, but I'm very much a novice, and a search of the forum proved to be futile. I have a <div> that has a fixed width in pixels. I want to center this <div> on the page. So I tried using percentages,
#head {
position:absolute;
top:0px;
left:25%;
right:25%;
width:500px;
border:1px solid #000000;
text-align:center;
}
But it is too far to the right. When I use text-align:center; in the body, IE automatically centers it, but Mozilla does not. So I'm guessing there has to be a correct way of doing this, but how?margin:auto;Argh, maybe I'm screwing up, but it has no affect:
#head {
position:absolute;
top:0px;
left:25%;
right:25%;
margin:auto;
width:500px;
height:100px;
border:1px solid #000000;
text-align:center;
}
I've include a screenshot, if it helps. A work in progress, but I can't center the top div! In the body, I have padding and margin set to 0px, could this be the problem?You'll still need to use the text-align:center; on the parent element to centre it in IE 5 if you go the margin:0 auto; route.
There is another method that is not as good (but perhaps you should know about anyway).
Move it 50% of the way accross with:
position:absolute;left:50%;
then bring it back with a negative left margin of half the elements width:
margin-left:-250px;
But like I say, the second method sucks, so you shoudn't ever need to use it.Argh, then what should I do? Text-align:center; in body (which is the parent element) works fine in IE, but in Mozilla and Opera, the Div is at the left margin. Surely there must be a way to center divs? What is wrong about the second method you mentioned, lavalamp? It works in Mozilla and Opera and even IE.You have to use BOTH the text-align:center; on the body and margin:0 auto; on the element you know.
You got a link?Hmm? Oh, yeah. My Layout (<!-- m --><a class="postlink" href="http://wdhaven.gotdns.com/proj_x/template.php">http://wdhaven.gotdns.com/proj_x/template.php</a><!-- m -->) using the second method you recommended to me. Thanks for the help thus far, but this is confusing me >.<Well since you already have the text-aligh;center; on the body, all you need to do is replace this
osition:absolute;
top:-1px;
left:50%;
margin-left:-250px;with this:margin:0 auto;Thankyou Lavalamp! I would get down on my knees and worship you if it weren't for an accident yesterday involving a very steep hill. This has been plaguin me for HOURS! You know, I've learned something today. I need to check w3schools more often.Well while I'm here, I might as well comment on your layout.
You can use floats to position your side bar and main content section next to each other. Not only that but you could put your navigational links after your main content in the source (which makes sense, because after all, the content is more important than the source code).Awesome dude, this is great. With some fiddling I can make it all perfect. Thank you once again, lavalamp.Happy to help.
But ray326 beat me to it with the centring. (Darn you ray!)This is driving me nuts as well. All I would've needed in HTML was center tags around any element. Now, CSS provides no alternative which works in all browsers. margin:auto does nothing in IE. Text-align:center changes the text align of child elements. ALl I wanna do is center a freakin div on the page, and there's no neat way of doing it in css.I think its margin:0 auto for block level elements and text-align:center for inline but im not sure. And yeah i wish there was an easier alternative.That may be correct syntax but IE doesn't support it. I had to add text-align:center to the body tag in my css to get it to center. There should be a quick easy way to center any element's alignment both horizontally, and vertically. No fuss, no muss. align:center. That should be it.Now im not sure but this could be a problem with your doctype as say for a centered div margin:0 auto works in IE(standards compliant mode) and mozilla etc.
To get it to center in the middle of the page vertically thats a different matter.Ack, thread revived x.x Yes, if you have a proper DTD, then browsers will launch in standards compliant mode. Like this for XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Then a margin: auto; for the block element you want centered, will center it. If you wish to have it work for those still using IE 5, then text-align:center; in the body will do it as well.
I pray one day IE will follow the rules of CSS...Speaking of IE and CSS rules, how the heck do I get it to render a margin like Gecko does? I set it to margin:0 and padding:0 and Gecko shows no space. IE is still showing a good 10px space. If I set it to -1 then it looks the way 0 should. Unfortunately Gecko then overlaps, slightly.margin-auto for centering has no effect on absolute positioned DIVs. That has been my experience.Absolute positioning overrides all other positioning considerations, including document flow. That's per spec.Yes, I know that you can't center absolute positioning (well, now I do...)
Right, so, if you ever have an issue that IE is doing something that Real browsers aren't here's what you can do:
div.center { margin:-1px auto;width:50%;border:1px solid #000000;}
/* And now, real browsers will understand
this method of declaring an object,
but IE won't. Hence, it won't render this: */
html>body div.center {margin:0px auto;}Well I've solved that one for the moment. What I'm dealing with now is the incorrect rendering of margins in IE. Gecko shows me a 0 margin when I set it to 0. IE is showing me a considerable space between elements. How do other folks get around this? I know I can put em in a table and correct it but I don't want to.Do you have the page online, or can you post the code?As I showed you, can give IE and real browsers different code. Since Gecko browsers understand the CSS spec a hell of a lot better than IE, you can do:
div {margin:-1px;}
That'll set the margin for -1px. You said that fixes IE. Now we tell gecko browsers to set it to 0, the proper way.
html>body div {margin:0;}
Since the gecko browsers understand this, they correctly set the margin to 0. However, IE does not understand it, and so will ignore it.Originally posted by Paul Jr
Do you have the page online, or can you post the code?
Unfortunately no, Paul, I don't. But I'm going to try Bob's suggestion. The code is posted in another thread I started, but Bob's suggestion may render it moot. Thanks, and Thanks Bob.Originally posted by DUNSEL
Unfortunately no, Paul, I don't. But I'm going to try Bob's suggestion. The code is posted in another thread I started, but Bob's suggestion may render it moot. Thanks, and Thanks Bob.
Heh, yeah, I just noticed the thread after I posted here.
I've run into the same problem before (if I understand what you're saying), and I've never figured out how I fixed it. I just kept adding and changing things until it worked. 
div{
margin:0 !important;
margin:-1px;
}
works too and looks a bit neater
#head {
position:absolute;
top:0px;
left:25%;
right:25%;
width:500px;
border:1px solid #000000;
text-align:center;
}
But it is too far to the right. When I use text-align:center; in the body, IE automatically centers it, but Mozilla does not. So I'm guessing there has to be a correct way of doing this, but how?margin:auto;Argh, maybe I'm screwing up, but it has no affect:
#head {
position:absolute;
top:0px;
left:25%;
right:25%;
margin:auto;
width:500px;
height:100px;
border:1px solid #000000;
text-align:center;
}
I've include a screenshot, if it helps. A work in progress, but I can't center the top div! In the body, I have padding and margin set to 0px, could this be the problem?You'll still need to use the text-align:center; on the parent element to centre it in IE 5 if you go the margin:0 auto; route.
There is another method that is not as good (but perhaps you should know about anyway).
Move it 50% of the way accross with:
position:absolute;left:50%;
then bring it back with a negative left margin of half the elements width:
margin-left:-250px;
But like I say, the second method sucks, so you shoudn't ever need to use it.Argh, then what should I do? Text-align:center; in body (which is the parent element) works fine in IE, but in Mozilla and Opera, the Div is at the left margin. Surely there must be a way to center divs? What is wrong about the second method you mentioned, lavalamp? It works in Mozilla and Opera and even IE.You have to use BOTH the text-align:center; on the body and margin:0 auto; on the element you know.
You got a link?Hmm? Oh, yeah. My Layout (<!-- m --><a class="postlink" href="http://wdhaven.gotdns.com/proj_x/template.php">http://wdhaven.gotdns.com/proj_x/template.php</a><!-- m -->) using the second method you recommended to me. Thanks for the help thus far, but this is confusing me >.<Well since you already have the text-aligh;center; on the body, all you need to do is replace this
osition:absolute;top:-1px;
left:50%;
margin-left:-250px;with this:margin:0 auto;Thankyou Lavalamp! I would get down on my knees and worship you if it weren't for an accident yesterday involving a very steep hill. This has been plaguin me for HOURS! You know, I've learned something today. I need to check w3schools more often.Well while I'm here, I might as well comment on your layout.
You can use floats to position your side bar and main content section next to each other. Not only that but you could put your navigational links after your main content in the source (which makes sense, because after all, the content is more important than the source code).Awesome dude, this is great. With some fiddling I can make it all perfect. Thank you once again, lavalamp.Happy to help.
But ray326 beat me to it with the centring. (Darn you ray!
)This is driving me nuts as well. All I would've needed in HTML was center tags around any element. Now, CSS provides no alternative which works in all browsers. margin:auto does nothing in IE. Text-align:center changes the text align of child elements. ALl I wanna do is center a freakin div on the page, and there's no neat way of doing it in css.I think its margin:0 auto for block level elements and text-align:center for inline but im not sure. And yeah i wish there was an easier alternative.That may be correct syntax but IE doesn't support it. I had to add text-align:center to the body tag in my css to get it to center. There should be a quick easy way to center any element's alignment both horizontally, and vertically. No fuss, no muss. align:center. That should be it.Now im not sure but this could be a problem with your doctype as say for a centered div margin:0 auto works in IE(standards compliant mode) and mozilla etc.To get it to center in the middle of the page vertically thats a different matter.Ack, thread revived x.x Yes, if you have a proper DTD, then browsers will launch in standards compliant mode. Like this for XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Then a margin: auto; for the block element you want centered, will center it. If you wish to have it work for those still using IE 5, then text-align:center; in the body will do it as well.
I pray one day IE will follow the rules of CSS...Speaking of IE and CSS rules, how the heck do I get it to render a margin like Gecko does? I set it to margin:0 and padding:0 and Gecko shows no space. IE is still showing a good 10px space. If I set it to -1 then it looks the way 0 should. Unfortunately Gecko then overlaps, slightly.margin-auto for centering has no effect on absolute positioned DIVs. That has been my experience.Absolute positioning overrides all other positioning considerations, including document flow. That's per spec.Yes, I know that you can't center absolute positioning (well, now I do...)
Right, so, if you ever have an issue that IE is doing something that Real browsers aren't here's what you can do:
div.center { margin:-1px auto;width:50%;border:1px solid #000000;}
/* And now, real browsers will understand
this method of declaring an object,
but IE won't. Hence, it won't render this: */
html>body div.center {margin:0px auto;}Well I've solved that one for the moment. What I'm dealing with now is the incorrect rendering of margins in IE. Gecko shows me a 0 margin when I set it to 0. IE is showing me a considerable space between elements. How do other folks get around this? I know I can put em in a table and correct it but I don't want to.Do you have the page online, or can you post the code?As I showed you, can give IE and real browsers different code. Since Gecko browsers understand the CSS spec a hell of a lot better than IE, you can do:
div {margin:-1px;}
That'll set the margin for -1px. You said that fixes IE. Now we tell gecko browsers to set it to 0, the proper way.
html>body div {margin:0;}
Since the gecko browsers understand this, they correctly set the margin to 0. However, IE does not understand it, and so will ignore it.Originally posted by Paul Jr
Do you have the page online, or can you post the code?
Unfortunately no, Paul, I don't. But I'm going to try Bob's suggestion. The code is posted in another thread I started, but Bob's suggestion may render it moot. Thanks, and Thanks Bob.Originally posted by DUNSEL
Unfortunately no, Paul, I don't. But I'm going to try Bob's suggestion. The code is posted in another thread I started, but Bob's suggestion may render it moot. Thanks, and Thanks Bob.
Heh, yeah, I just noticed the thread after I posted here.
I've run into the same problem before (if I understand what you're saying), and I've never figured out how I fixed it. I just kept adding and changing things until it worked. div{margin:0 !important;
margin:-1px;
}
works too and looks a bit neater