On Nov 5, 2010, at 7:25 PM, Thierry Koblentz wrote:
given this snip of code:
div#container {
margin: 15px auto;
}
is "auto" enough to make the contents of that div remain centered
from left to right as the end user scales their browser window larger
and smaller?
No. You'd need to set a width too.
This is the excerpt of a presentation I gave a couple of months
ago. It may
help you understand the concept behind "auto":
The horizontal position and size of a non-floating, block-level
element is
determined by seven properties: margin-left, border-left, padding-
left,
width, padding-right, border-right, and margin-right.
The sum of these seven properties is always equal to the 'width' of
the
parent element.
Three of the seven properties can be set to auto: these are margin-
left,
width, and margin-right.
For replaced elements, a value of auto on 'width' is replaced by the
intrinsic width, so for them there can only be two auto values.
If exactly one of margin-left, width, margin-right is auto, the UA
will
assign that property a value that will make the sum of the seven
equal to
the parent's width.
If none of the properties are auto, the value of 'margin-right'
will be
assigned 'auto'.
If more than one of the three is auto, and one of them is 'width',
then the
others ('margin-left' and/or 'margin-right') will be set to zero
and 'width'
will get the value needed to make the sum of the seven equal to the
parent's
width.
Otherwise, if both margin-left and margin-right are auto, they will
be set
to equal values. This will center the element inside its parent.
If auto is set as the value for one of the seven properties in an
element
that is inline or floating, it will be treated as if it were set to
zero.
HTH
Regards,
Thierry
Thank you for that substantial response..helps shine a light on the
greater picture for me.
John
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
