Professors: Does centering by using <div align> mess up relatively positioned styles?

[themind]

Having an annoying problem with IE. I make a container div to put everything inside that looks like this:

#container {
position: relative;
margin: 0 auto;
}

That obviously doesn't center anything in IE so then I do this:

<div align="center">
<div id="container">
</div>
</div>

This beautifully centers the "container" div, then completely f*?ks up everything that is relatively positioned inside of it. Is there a way to center my "container" and not ruin the rest of my work?

I could change all my other divs to be positioned absolutely, but then it gets real funky and starts to look different in every single browser. I find that relatively positioned divs "smash" up into other much cleaner accross the board. Any and all help is very, very much appreciated, theMind-

[Twey]

#1:
What's wrong with

<div id="container" align="center">
</div>

?

Don't needlessly multiply entities (oh so useful a phrase ). Relative positioning refers to the position relative to where the element would normally be without positioning. If you start moving the div around, everything inside it gets moved around too; so, the position everything moves to changes. You need to adjust your positioning to compensate.

[jscheuer1]

Because IE does not respect auto in margin declarations and because align="center" gets inherited or overridden depending upon the situation, the safest way to achieve center alignment of a block of content that will maintain its own independent alignment properties within those bounds is still using a centered table with one cell aligned as you see fit (or not at all) as the container element:

<table align="center"><tr><td>

content goes here

</td></tr></table>

If, as is the vogue in many circles of late, you elect to use divisions, you can try:

#container {
position: relative;
margin: 0 auto;
}

* html #container {
margin: 0 10%;
}

This will not be perfect and the actual percentage (you can use a fixed figure like '50px' too) will need to be optimized for your layout. It will still be off center at certain resolutions and window widths. There are other (what I consider hack methods) to do this but, they are either too complex, too likely to be deprecated, too subject to exceptions in certain cases or all of the above, to satisfy me.

[themind]

Twey, thanks for taking the time to read my post. However,
<div id="container" align="center"></div> will not work. This will center everything inside the container div, not the div itself.

#1:
What's wrong with

<div id="container" align="center">
</div>

?

Don't needlessly multiply entities (oh so useful a phrase ). Relative positioning refers to the position relative to where the element would normally be without positioning. If you start moving the div around, everything inside it gets moved around too; so, the position everything moves to changes. You need to adjust your positioning to compensate.

[themind]

John, thanks for taking the time to read my post. I put my "container" div inside a table and it works perfectly.

I am curious, however, to what the

*html #container {
margin: 0 10%;
}

does and means. What does the '*html' part do and why? Very interested, and thanks again, TM-

[jscheuer1]

IE thinks there is a css element, *html, that sits atop everything else. No other browser works this way. By using this in front of a selector, you are addressing IE only. Using margin: 0 auto; means no top or bottom margin, left and right margins use what is automatically left over after subtracting the width of the element. IE won't do this but, it will take whatever percent you specify of the entire window width and apply it left and right as margins.

[mwinter]

There seem to be some general misunderstandings in this thread that I think need clearing up.

#container {
position: relative;
margin: 0 auto;
}

That obviously doesn't center anything in IE [...]

As it is, that shouldn't centre the container element in any user agent. The reason requires looking at the algorithm used for calculating block-level element widths:

If 'left' or 'right' are given as 'auto', their computed value is 0. The following constraints must hold between the other properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

(If the border style is 'none', use '0' as the border width.) [...]

If there is exactly one value specified as 'auto', its computed value follows from the equality. [ed: Doesn't apply here as 'width', 'margin-left' and 'margin-right' are all 'auto'.]

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows
from the resulting equality. [ed: This is the clincher! The algorithm stops here in this case as 'margin-left' and 'margin-right' are now both '0', so the step below doesn't apply.]

If both 'margin-left' and 'margin-right' are 'auto', their computed values are
equal. [ed: This is the property we want to eventually use.]

— 10.3.3 (Abridged), CSS 2 Specification

If you followed the above, it should be clear that in order to centre a block-level element, you need to give that element an explicit width other than auto, otherwise it will just default to taking up as much width as it possibly can.

You may also want to use separate properties for the left and right margins as IE/Mac doesn't apply the shorthand properly:

margin-left: auto;
margin-right: auto;

I could change all my other divs to be positioned absolutely, but then it gets real funky and starts to look different in every single browser.

It will also be completely rigid, forcing a horizontal scrollbar (the worst kind) in browsers that have a viewport that is smaller than you'd like. That said, if you're implementing a fixed-width design (generally inappropriate on the Web), that will probably happen anyway.

Because IE does not respect auto in margin declarations [...]

IE6 and IE/Mac does in 'Standards' mode, but not in earlier versions or 'Quirks' mode. This can be worked around using a browser bug where the text-align property applies to block-level elements, but that won't do much unless the problem I mentioned above is addressed.

IE thinks there is a css element, *html, that sits atop everything else.

First of all, the selector is '* html' (that is, [asterisk] [space] html, which is what you originally posted, John). What this would match is any html element that is a descendant of some other another element.

The problem here is that the html element is the root element in any HTML document (which is why it appears in the DOCTYPE declaration), so this should never apply. True to IE though, bad programming makes it believe otherwise. Still, this is useful in cases where you need to apply different rules to IE to correct even more serious bugs.

Mike