Section 19.2. Width and Height


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.

height

Values:

     <length> | <percentage> | auto | inherit 

Initial value:

     auto 

Applies to:

Block-level elements and replaced elements (such as images)

Inherited:

No

width

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.

max-width, max-height

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

min-width, min-height

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





Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net