[/PHP] What will be 0 and what is auto? Is 0 left and right and auto top and bottom?
alt131
11:27 am on Nov 26, 2010 (gmt 0)
Hi toplisek, That's right - what you want is the explanation for margin shorthand [w3.org].
In other words, margin: 0 auto; = top/bottom left/right Or margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;
toplisek
12:32 pm on Nov 26, 2010 (gmt 0)
margin-left: auto; margin-right: auto; will do auto to which element as this is parent and none parent is there anymore. Imagine I test on 1024px X 768px
alt131
12:58 pm on Nov 26, 2010 (gmt 0)
"auto" will be applied to #maincontainer, and even if #maincontainer is now the "parent" container in your code, it is still a child of <body>.
So if <body> is 1024px wide, then the left/right margin for #maincontainer will be calculated so #maincontainer is horizontally centered. Easiest just to try it in your code editor, but you can work it out yourself: (width of body) - (width of #maincontainer) / 2 to get width of left/right margin
[Edit for clarification] I'm assuming #maincontainer is a block element like a div - not inline, like a span. There is more detail about calculating widths [w3.org] in the recommendation
toplisek
1:24 pm on Nov 26, 2010 (gmt 0)
Thanks. This is very clear explanation.
You quoted the following: "auto" will be applied to #maincontainer
If I calculate further it is the best to set and all child elements within my parent #maincontainer (width: 100%;) will be set as I like: CENTER and resolution is not important (new browsers).
Thanks, toplisek. If I still understand what you are asking; a couple of thoughts on your approach: All the browsers (except ie6) listed in the maxdesign article are so old they can probably be ignored. If you still have to deal with ie6, the centering problems were caused by coding in quirks mode, so if you code strict ie6 will not be a problem.
So if you are coding strict, or do not have to worry about ie6, there is no need to set text-align on the body and then use a containing div as suggested in the article. That means you can treat <body> as the container, and it will always expand to width:100% regardless of the resolution. You are right - there is no need to worry about the exact resolution or applying text-align:center to the body, then using a containing div.
However, an element needs to be less than 100% in order to appear centered and long lines of text can be hard to read on wider screen widths. It is possible to set a width and center <body>, but many coders would leave <body> alone, and use #maincontainer as a container for the other elements as you suggest - but give it a width of less than 100% and center it to create a total overall "readable" width for the page content.
