Dimensions: Width and Height in Css

Before moving on, it is worth mentioning two very important properties that can be declared
for any element—width and height.
It might seem a little patronizing to mention them, as their uses must seem obvious. However,
these two properties have already appeared in several examples, and will continue to be used
throughout the book.
Both properties are essential for setting specific heights and widths of elements. Consider
that an element will expand widthwise to fit its container and heightwise to encompass its
content—you will start to realize before long that, in some situations, a certain amount of
control is missing. By applying width and/or height rules, you can regain control.
Values can be given as a length, percentage, or auto. Note that all of these values can be
influenced adversely by other rules within the style sheet, and also by the (X)HTML elements
they might contain. For example, the resulting display can be affected by a number of knockon
values from margin, padding, border, or child elements.

Setting dimensions and alignment

As you can see from the examples so far, browsers by default set cell sizes to the smallest
possible values that are large enough to accommodate the contents and any cell padding
settings defined. Although this is suitable for the majority of purposes, designers tend to
want more visual control over layouts.
Long-time designers may be well-versed in the practice of using height and width attributes
to control table and cell dimensions, but beware. The width attribute is fine to use on
table start tags (the possible values of which are a number denoting the width in pixels of
the table, and a percentage, which is a percentage of the parent element’s size). However,
the height attribute is nonstandard and fails in the majority of web browsers (in fact, if
using an XHTML DTD, it fails in every currently shipping mainstream browser), which might
come as something of a shock to those people who enjoy centering content in a browser
window by using a table.
As for setting widths and heights within table cells, that’s something that should be
avoided altogether—height and width attributes within table cells are deprecated. You
might argue that this is irrelevant—after all, all major browsers support these attributes.
Although this is true, deprecated attributes are not guaranteed to be supported in the
future. Also, table cells always expand to accommodate the widest or tallest element in a
row or column. As a result of this, defining heights and widths is often a futile attempt to
control the uncontrollable.