Defining an Element’s Width and Height - HTML

There are multiple ways to affect an element’s size. You have seen how other formatting can change an element’s size—in the absence of explicit sizing instructions the user agent does its best to make everything fit. However, if you want to intervene and explicitly size an element, you can. The following sections show you how.

Specifying exact sizes
You can use the width and height properties to set the size of the element. For example, if you want a particular section of the document to be exactly 200 pixels wide, you can enclose the section in the following <div> tag:

Likewise, if you want a particular element to be a certain height, you can specify the height using the height property.

Note:Keep in mind that you can set size constraints-—minimum and maximum sizes-—as well as explicit sizes. See the next section for details on minimum and maximum sizes.

Specifying maximum and minimum sizes
There are properties to set maximum and minimum sizes for elements as well as explicit sizes. At times, you will want the user agent to be free to size elements by using the formatting surrounding the element, but still want to constrain the size, allowing an element to be displayed in its entirety instead of being clipped or displayed in a sea of white space.
You can use the following properties to constrain an element’s size:

• min-width
• max-width
• min-height
• max-height

Each property takes a length or percentage value to limit the element’s size. For example, to limit the element from shrinking to less than 200 pixels in height, you could use the following:

Controlling element overflow
Whenever an element is sized independently of its content, there is a risk of it becoming too small for its content. For example, consider the paragraphs are the same except that the second paragraph has had its containing box specified too small, and the contents fall outside of the border. In this example the user agent (Opera) chose to display the rest of the element outside its bounding box. Other user agents may crop the element or refuse to display it at all.

If you want to control how the user agent handles mismatched elements and content sizes, use the overflow property. This property has the following format:

An element that is mis-sized doesn’t always handle its content properly.

The values have the following effect:

• visible—The content is not clipped, and is displayed outside of its bounding box, if necessary.
• hidden—If the content is larger than its container, the content will be clipped.

The clipped portion will not be visible, and the user will have no way to access it.

• scroll—If the content is larger than its container, the user agent should contain the content within the container, but supply a mechanism for the user to access the rest of the content (usually through scroll bars). The same paragraph, but with its overflow property set to scroll.
• auto—The handling of element contents is left up to the user agent. Overflows, if they happen, are handled by the user agent’s default overflow method.

The overflow property set to scroll instructs the user agent to supply a mechanism to view the entire content (usually scrollbars).