Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

18.4. Controlling an Element's Size

You can control an element's size using CSS. You can specify an exact size for the element to be rendered or specify a minimal size that the element can occupy. You can also control what the user agent should do with any content that doesn't fit in the element. The following sections detail the use of CSS in sizing elements.

18.4.1. Specifying an Exact Size

You can use the width and height properties to define an element's size. Both properties have a similar syntax:

width | height:  <length> | <percentage> | auto;

As with most properties, you can use various metrics to specify an element's size. For example, the following style specifies that an element should be rendered 100 pixels square:

p.hundredsquare { width: 100px;  height: 100px; }

The following code sets an element to 150 percent of its normal width:

p.wider { width: 150%; }

Specifying auto causes the element's dimension (width or height) to be sized according to its contents or other relevant properties.

18.4.2. Specifying a Minimum or Maximum Size

Sometimes you will want to specify the maximum or minimum size an element can be instead of an absolute size. This allows the user agent to size the element using normal parameters for doing so, but within certain constraints. For those purposes, you can use min and max dimension properties:

• min-height

• max-height

• min-width

• max-width

These properties all have the same syntax:

property:  <length> | <percentage>;

For example, if you want an element ...