WebReference.com - Part 1 from Chapter 11 of Cascading Style Sheets A Beginner's Guide, from Osborne/McGraw-Hill (4/6)

[previous] [next]

CSS: A Beginner's Guide

The Width and Height Properties

It is possible to specify the width and height a box should have by using the width and height properties. These properties function in much the same way as HTML's width and height attributes. For instance, if you've worked with HTML, you know that when you include an image on a page, it is important to specify its width and height in pixels. Thus, the HTML code for inserting a 200x300 image on a page would look something like this: <img href="practice.gif" width="200" height="300" alt="Practice" />. This enables the browser to reserve the proper amount of space for that image as it loads the page. In HTML, these attributes also enable you to "scale" an image to a larger or smaller size. For example, if you didn't want your image to take up so much space, you might set the width and height attributes to width="100" and height="150". With CSS, the width and height properties allow you to do the same with boxes.

Actually, scaling images with CSS is easier than it is with HTML. If you are using CSS to resize an image, you only need to provide one value, either width or height. The browser will automatically set the other value proportionally. Thus, with CSS you need never have an image that appears out of proportion because it was improperly scaled.

Tip: It's still not a good idea to scale images with HTML or CSS. You'll have better performance (quicker downloads) if you actually resize the image in an image editing program such as PaintShop Pro or Adobe PhotoShop.

Values

Because the height and width properties are normally set by the browser according to the standards mentioned in the preceding section, it is generally not necessary to specify the height or width for a box. You will tend to use these properties mostly for setting image sizes or in special cases where you are using text with the "float" property. The height and width properties take the following values:

Length (in, cm, mm, px, pt, pc)
Percentage (of the containing box)
Auto (browser-determined)

Hint: If you use percentages in setting widths and heights, keep in mind that the percentage is based on the width of the containing box (parent element), not of the browser window.

Syntax

The width and height properties can be applied to both block-level and replaced elements, such as images and "objects." Also, because the initial containing block cannot be positioned or resized, you cannot use the width or height properties with the "body" selector. However, all of the following style rules would be acceptable:

img.logo       {width: 10%;}
p              {height: 15px;}
h1             {width: 33%; height: 2.5em;}
#425x200       {width: 425px; height: 200px;}

Keep in mind that you cannot use negative percentage values with the width or height properties, either. Table 11-1 lists some other characteristics of these properties.

Do they inherit?	Default value	Browser support	Work with
Yes	Auto	Width: inconsistent Height: strong (except for Netscape 4)	Block-level and replaced elements

Table 11-1 Characteristics of the width and height properties

1-Minute Drill

What is the formula for calculating a box's width?
What generally determines a box's height?
What is different about the box generated for an image?

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = width of the parent element
The box's content
The box takes on the dimensions of the image

The min-width and max-width Properties (CSS 2)

If you want to prevent browsers from automatically resizing boxes, you can use the min-width and max-width properties. As their names imply, these properties are designed to set minimum and/or maximum widths for boxes. Like the width and height properties, these properties accept length and percentage values. If no value is specified, then a default value of "none" is applied. The most important characteristic of these properties to note is that almost no current browsers support them. Table 11-2 lists some other key characteristics of the min-width and max-width properties.

Do they inherit?	Default value	Browser support	Works with
No	None	Poor	Block-level and replaced elements

Table 11-2 Characteristics of the min-width and max-width properties

The Min-Height and Max-Height Properties (CSS 2)

Again, as their names imply, these properties enable you to set minimum and/or maximum height values for boxes. They will accept length and percentage values and have a default value of none. If you use a percentage value, it is measured in relation to the parent element. For example, if you have a div block that measures 100 pixels in height, and you set a "p" selector to have a maximum height of 25%, the maximum height will be 25 pixels. As with the min-width and max-width properties, these properties are poorly supported. Table 11-3 lists other key characteristics of the min-height and max-height properties:

Do they inherit?	Default value	Browser support	Works with
No	None	Poor	Block-level and replaced elements

Table 11-3 Characteristics of the min-height and max-height Properties