Hey Everyone,
I think this is correct. What happens is that if you don't set a width, it defaults to 'auto'. In that case you have a left margin, right margin, and width all with 'auto' values. This forces the left margin value to become 0 and the right margin value to be ignored. I think. The spec is a little confusing.
I guess you can't center a fluid width element. Does anyone know of a way?
-Mike
Matt Thommes wrote:
As far as I know, setting the left and right margins to "auto" only works if an explicit "width" is also set.
If a width is not set for the element that has the auto margins, you will not get the "centered" effect.
I'm not really sure why this is the case, but I've never really had a problem with it.
So, maybe try:
#container { margin-left : auto; margin-right : auto; width: 750px; }
-Matthom http://www.matthom.com/
On 4/28/05, designer <[EMAIL PROTECTED]> wrote:
Firstly, let me say that I have been doing standards only since last September, so am very much a novice. I have upgraded 5 or so sites to be XHTML/CSS etc, and got them to validate as STRICT, so I am happy that 'I can do it', as far as it goes.
I have learnt quite a lot (in fact, it seems a helluva lot :-) and picked up sufficient tips etc to be able to sit down and code without thinking about it. (too much, anyway :-)
So having filled in the background, I'll tell you why I think I'm going to be 'naughty'.
Most of my designs have a container, 600px-750px wide, which I like to center horizontally, at least. So I've been doing the :
#container { margin-left : auto; margin-right : auto; }
Thing. The point is, this doesn't work in IE, and as IE is very important (like it or not), I've been doing the conditional comment hack:
<!--[if IE]> <div align="center"> <![endif]--> <div id="container"> This is some text </div> <!--[if IE]> </div> <![endif]-->
Ok, but the centring doesn't cascade (except in IE) so, anything that goes inside the container has to have the left and right margin:auto thing applied to it.
I'm beginning to think that using:
<div align="center"> <div id="container"> This is some text </div> </div>
and a transitional DTD produces something which has less lines of code, contains no hack, and the centring cascades down the line to the container contents. I've got to say it, this DOES seem a much more 'sensible' approach. I do realise that this must not get out of hand, but a limited and (in my view) valid case such as this is justification for the occasional 'hybrid' approach. So, I'm not asking for a kind of 'permission' to do this (I can make my own mind up about that :-), but I am asking if, in your view, there are any really important reasons not to, and to assess your thoughts/responses.
In other words, using that conditional comment makes the code validate strict, but only because the validator ignores it, so that could be considered 'cheating'. So why not be honest about it, and admit the cheating by using the align="center" div for all browsers? As far as I know, there isn't an alternative for IE?
Thank you!
Bob McClelland, Cornwall (U.K.) www.gwelanmor-internet.co.uk
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
