Setting the Height or Width for an Element
To set the height or width for an element:
Figure 11.11. Limiting the wrap div to 90% of the browser window gives it some air and helps it not look so cramped. By reducing the main div to 75% of the screen div (which is the same size as the wrap div), we leave room for the sidebar.
Figure 11.12. The wrap div, which encloses the shaded screen div completely, now occupies only 90% of the browser window.
Width, margins, and auto
For most block-level elements, the auto value for width is calculated from the width of the containing block minus the padding, borders, and margins. The containing block is the width that the element gets from its parent and is sometimes confusingly called the inherited width, even though it has nothing to do with normal CSS inheritance.
Elements with images and objects (replaced elements) have an auto width equal to their intrinsic value, that is, the actual dimensions of the external file. Floated elements have an auto width of 0. Non-floated inline elements ignore the width property altogether.
If you manually set the width, margin-left, and margin-right values, but together with the border and padding they don't equal the size of the containing block, something's got to give. And indeed, the browser will override you and set margin-right to auto (Figures 11.14 and 11.15). If you manually set the width but set one of the margins to auto, then that margin will stretch or shrink to make up the difference. If you manually set the width but leave both margins set to auto, both margins will be set to the same maximum value (resulting in your element being centered).
Figure 11.14. In this mini-example, I've set the width of the parent div to 300 pixels. This will be our containing block. Then, both paragraphs have 10 pixel margins, 5 pixel padding and 5 pixel borders on all sides. The first paragraph has the width set automatically, the second is set at 200 px.
Figure 11.15. If the width is auto, as in the top paragraph, its value is derived from the width of the containing block (yellow) minus the margins, padding, and border. If the width is set manually (as in the bottom paragraph), the right margin is usually adjusted to pick up the slack.
Note that browsers never adjust the width of the borders or the padding.
Now those are the rules, for what they're worth. Unfortunately, IE 5 (and IE 6 in quirks mode) thought that when you set the width, you were setting the sum of the content area, the borders, and the padding, instead of just the content area as it should be. And IE 6 lets the margins and replaced elements of a child element affect the width of the containing block while asserting in their documentation that this should not be allowed. As if this weren't all complex enough!