center a DIV in the center of the browser window

[cybercampbell]

Hi all

I'm using this to center a DIV in the center of the browser window:

#mainframe {
position:relative;
margin: 20px auto 0px auto;
text-align:center;
overflow: visible;
width:765px;
height: 524px;
visibility: visible;
} 

But it's still to the LEFT.

Can anyone see what I'm doing wrong.

This works on my other site.

Chris

[Fang]

It will work if you use a valid DTD

[BonRouge]

You may need to set the parent element (I imagine that would be your body) as text-align:center. What browser are you using? I think what you have there should work in Firefox but not IE because... well, I'm sure you know why.

[Jona]

Originally posted by BonRouge
You may need to set the parent element (I imagine that would be your body) as text-align:center.

That property (text-align) only applies to inline-elements, so the DIV would not be affected. Because there is a width present and because the left and right margins are both set as "auto," the DIV should be positioned in the center, horizontally.

[BonRouge]

I stand corrected.

[pyro]

Unless you are using IE 5.x, Fang told you why it didn't work.

[cybercampbell]

cheers fang...that was it!!!


Chris

[BonRouge]

Originally posted by Jona
That property (text-align) only applies to inline-elements, so the DIV would not be affected. Because there is a width present and because the left and right margins are both set as "auto," the DIV should be positioned in the center, horizontally.

Looking at this again (and after checking) - are you sure about this?

I actually think I was right in what I said there.

EDIT: AAAGGGHHH! I take it back. I think I had an invalid DTD too. I needed it for that. Such a fool!

[Jona]

Originally posted by BonRouge
Looking at this again (and after checking) - are you sure about this?

I actually think I was right in what I said there.

EDIT: AAAGGGHHH! I take it back. I think I had an invalid DTD too. I needed it for that. Such a fool!

Don't consider any statement as true unless the standard - the W3C - says it is; though browsers have done an excellent job at translating the words of the W3C, they are apt to bugs and faultiness. Therefore, it's best to look-up each term at W3.org to make sure you're correct in what you say.

Originally located at the W3C CSS2 Specification
This property describes how inline content of a block is aligned.

See also: <http://www.w3.org/TR/CSS2/visudet.ht...hs_and_margins>.