Thursday, February 18, 2010

The width Property

The width property is used to specify the width of the content-area of block-level elements, inline replaced elements and other elements to which the declarations display:block or display:inline-block have been applied.

By default, the width of an element is dependant on the width of the viewport of the web browser window.

Its initial value is auto. It is not an inherited property. It can take length values, percentages and the keywords auto and inherit. Percentage values refer to the width of the containing block element. Negative values are not allowed.

width with px values

In the example below the width property is applied to a block-level element.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';width:300px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

The width property cannot be applied to inline-level non-replaced elements. However, it can be applied to inline-level replaced elements such as img.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';">the <img src="20x50.jpg" alt="20x50.jpg">quick <img style="width:50px" src="20x50.jpg" alt="20x50.jpg"> lazy dog.</p>

 

In the above example, note how the second image is scaled proportionally so that the width is 50px. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the resized image is also anti-aliased. However, in Internet Explorer 6 and Internet Explorer 7, the image is not anti-aliased.

width with percentage values

With the width property, percentage values refer to the width of the containing element. All the displayed elements of a web page have the body element as an ancestor. Therefore, if an element has no other parent, then percentage widths will refer to the width of the body element. The default width of the body element is equal to the width of the viewport excluding any padding and margins of the html element.

Example 3: <div style="font-size:35px;font-family:'Times New Roman';width:750px;background-color:purple"><p style="width: 75%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p></div>

In the above example, the width of the <p> is 75% of the width of the parent element (750px). This computes to 562.5px, which rounds off to 563px.

width with em values

em values values refer to the font size of the element.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';width:14.29em">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p>

In the above example, the width of the <p> is 14.29*35px = 500.15px

width:auto

Since auto is the initial value of width, the width:auto declaration is only useful to override another width declaration that has been applied to an element.

width:inherit

width is not an inherited property. However, the width:inherit declaration can be used in order that an element inherits the width declaration of its parent.

Internet Explorer 6 and Internet Explorer 7 ignore the width:inherit declaration.

Concluding Notes

In Firefox 3, Firefox 3.5, Internet Explorer 7 and Internet Explorer 8, when the width of the content area + padding + margins of an element is more than the specified width of its containing element, the element overflows out of the content area of the containing element. However, in Internet Explorer 6 the width of the containing element is increased to accomodate the child element without overflowing. That is, Internet Explorer 6 treats the width declaration as the minimum width of an element. This is a bug.

Internet Explorer 6 and Internet Explorer 7 ignore the width:inherit declaration. Therefore, this declaration must be avoided.

No comments: