CSS: The Missing Manual

Determining Height and Width

Two other CSS properties that form part of the CSS box model are useful for assigning dimensions to an object, such as a table, column, banner, or sidebar. The height and width properties assign a height and width to the content area of a style. You'll use these properties often when building the kinds of CSS layouts described in Part III of this book, but they're also useful for more basic design chores like assigning the width of a table, creating a simple sidebar, or creating a gallery of thumbnail images (like the one described in the steps in Section 8.6).

Adding these properties to a style is very easy. Just type the property followed by any of the CSS measurement systems you've already encountered. For example:

	width: 300px;
	width: 30%;
	height: 20em;

Pixels are, well, pixels. They're simple to understand and easy to use. They also create an exact width or height that doesn't change. An em is the same as the text size for the styled element. Say you set the text size to 24px; an em for that style is 24px, so if you set the width to 2em, then it would be 2x24 or 48 pixels. If you don't set a text size in the style, the em is based on the inherited text size (see Section 6.2.2.3).

For the width property, percentage values are based on the percentage of the width of the style's containing element. If you set the width of a headline to 75 percent and that headline isn't inside any other elements with a set width, then the headline will be 75 percent ...