19.2. Width and Height Use the width and height properties to specify the dimensions of a block-level element or an inline replaced element (like an image). The width and height properties do not apply to inline text (non-replaced) elements and will be ignored by standards-conformant browsers. In other words, you cannot specify the width and height of an anchor (a) or a strong element unless you change its display role to a block-level display value like block, list-item, or inline-block. Values: <length> | <percentage> | auto | inherit Initial value: auto Applies to: Block-level elements and replaced elements (such as images) Inherited: No Values: <length> | <percentage> | auto | inherit Initial value: auto Applies to: Block-level elements and replaced elements (such as images) Inherited: No Using the height and width properties is straightforward, as shown in these examples and Figure 19-3. div#tall {width:100px; height:200px; } div#wide {width:200px; height:100px; } <div style="position:absolute;"> Lorem ipsum ... </div> <div style="position:absolute; left: 205px;"> Lorem ... </div> There are only a few special behaviors to be aware of: width and height properties apply to the content area of the element only. Padding, borders, and margins are added onto the width and height values to arrive at the total element box dimensions. (See the sidebar "The IE/Windows Box Model Problem" for details regarding the notoriously incorrect implementation of box model measurements in Internet Explorer for Windows.) Figure 19-3. The height and width properties An element's height is calculated automatically and is just large enough to contain the element's contents; therefore, it is less common to specify height. The height of the content may change based on font-size, user settings, or other factors. If you do specify a height for a text element, be sure to also consider what happens should the content not fit (the overflow property is discussed in Chapter 21). For images, it is recommended that both width and height values be provided. CSS 2 introduced percentage values for width and height. Percentage values are calculated as a percentage of the width of the parent element. This means that if the size of the parent element changes, the width and height of its child elements will change proportionately. The IE/Windows Box Model Problem One of the most notorious browser inconsistencies is that Internet Explorer for Windows (all versions except IE 6 and 7 running in Standards mode) has its own implementation of the box model . In these versions of IE/Windows, the width property is applied to the entire element box, from outer margin edge to outer margin edge, not just the content area, as it should be. This causes valid CSS layouts that apply padding, borders, and margins to elements of a specific width to be rendered inconsistently. By using a proper DOCTYPE declaration, you can switch IE 6 and 7 into Standards mode, and widths and heights will apply to the content area, as expected (see Chapter 9 for details on DOCTYPE switching). Until all versions of IE 5.x/Windows fade away completely, there is the "box model hack," a well-known workaround developed by Tantek Çelik that serves up a separate set of width values just for IE. This and other browser workarounds are discussed in Chapter 25. |
19.2.1. Maximum and Minimum Heights CSS 2 introduced properties for setting minimum and maximum heights and widths for block elements. They may be useful if you want to put limits on the size of an element when positioning it on a page. Values: <length> | <percentage> | none | inherit Initial value: none Applies to: All elements except non-replaced elements (i.e., inline text elements) and table elements Inherited: No Values: <length> | <percentage> | none | inherit Initial value: none Applies to: All elements except non-replaced elements (i.e., inline text elements) and table elements Inherited: No There are a few behaviors of the minimum and maximum size properties to keep in mind: These properties are for use with block-level and replaced elements (like images) only. Once again, the measurements apply only to the content area of the element. If you add padding to an element, it will be applied on the outside of the content area and make the overall element box larger, even if a maximum height and width have been specified. | Internet Explorer through Version 6 does not support the min-width, min-height, max-width, and max-height properties. The CSS community has devised some workarounds for the min-height problem. These resources are a good starting point for investigation: Dustin Diaz's "Min-height Fast Hack" at www.dustindiaz.com/min-height-fast-hack/ Dave Shea's Mezzoblue.com: www.mezzoblue.com/dailies/2005/01/05/index.php Grey Wyvern's solution at www.greywyvern.com/code/min-height-hack.html |
|
|