Thursday, February 18, 2010

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.

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.

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.