Setting the Height or Width for an Element

You can set the height and width for most elements, including images, form elements, and even blocks of text.

To set the height or width for an element:

• Type width: w, where w is the width of the element's content area, and can be expressed either as a length (with units) or as a percentage of the parent element. Or use auto to let the browser calculate the width.

• Type height: h, where h is the height of the element, and can be expressed only as a length (with units). Or use auto to let the browser calculate the height.

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.

Tips

• If you don't explicitly set the width or height, auto is used (see page 175).

• Remember that a percentage value is relative to the width of the parent element not the original width of the element itself.

• The padding, borders, and margin are not included in the value of width (except in IE 5.x for Windows, which quite erroneously considers the width to be the sum of the content area, borders, and paddingsee next page).

• Widths and heights are not inherited.

• There are also min-width, min-height, max-width and max-height properties (Figure 11.13) but they are not supported by Internet Explorer, up to and including version 7.

  Figure 11.13. The max-width and min-width properties are ideal for setting the outside limits of our liquid layout. We don't want it to get too wide, even if visitors have huge monitors, nor too narrow, even if visitors squeeze it beyond recognition. While Firefox and Opera support these properties, unfortunately, Internet Explorer (up to and including version 7) does not.

  

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!