Case 3: Two or Three of the Three Values are Auto | Cascading Style Sheets: Designing for the Web (3rd Edition)

Case 3: Two or Three of the Three Values are "Auto"

There are two possible cases: One case is where width is auto, and one where width has some other value. First, if width is auto, the width value is the one that is calculated using the formula in Figure 8.17. That is, the width will be maximized after consideration of the margin size. Any margins set to auto will become 0.

If width is not auto, but both margin-left and margin-right are, the two margins will be of equal size and as large as possible.

Here is an example with width set to auto:

 <STYLE>   DIV {     width: 12cm }   P {     width: auto;     margin-left: 7cm;     margin-right: auto} </STYLE> <DIV> <P>This paragraph is inside a DIV that is exactly 12cm wide. The paragraph itself has a 7cm margin on its left and an auto margin on its right. No padding or border has been specified, so we assume there aren't any. </DIV>

In this example, the parent of the P element, DIV, has a width of 12cm, so we use the formula as follows, filling in the blanks with the values of the various widths:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = width of parent

7cm + 0 cm + 0 cm + auto + 0 cm + 0 cm + 0 cm = 12cm

The right margin is 0, and because 12 7 = 5, the resulting width of the P element is 5cm.

The second example shows both margin-left and margin-right set to auto. In this case, the two margins will each get half of the available space, thereby causing the element to be centered in its parent:

 <STYLE>   BODY { width: 10cm }   P { width: 6cm; margin: auto } </STYLE> <BODY> <P>This paragraph is 6 cm wide and will be centered inside its parent (BODY, in this case). </BODY>

Completing the width formula:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = width of parent

auto + 0 cm + 0 cm + 6cm + 0 cm + 0 cm + auto = 10 cm

gives us 2cm of space each for the left and right margins; that is, 10 6 = 4cm total to be divided equally between the two margins.