Learning JavaScript

Size and Clipping

An element’s size is controlled through a set of six CSS attributes. The first two, width and height, are the most common and are used to set the absolute width and height of the element. The other four—min-height, min-width, max-height, max-width—are handy CSS attributes (particularly when working with images), but not commonly used in dynamic effects.

Tip

Actually, an element’s width and height are factors of several attributes, including the element’s border, margin, padding, and content. All combined, these provide a CSS “box model” associated with block elements—elements that force a line break before and after. Read more on the box model at the W3C page, “Box model,” at http://www.w3.org/TR/REC-CSS2/box.htm.

If the element’s contents are too large for the element, the overflow is managed through the CSS overflow attribute, which can be set to visible (render all of the content and overflow the element boundaries); hidden (clip the content); scroll (clip the content, and scrollbars are provided); and auto (clip and provide scrollbars only if some of the content is hidden).

Tip

Why even set the element’s height? After all, if the height is not defined, and the overflow not set to clip, the element automatically resizes to fit the content.

If you have content in two columns, laid out side by side, you might want to set the heights of the columns so that one isn’t excessively longer than the other.

Overflow and Dynamic Content

When an element’s contents are replaced ...