Size and Clipping
An element’s size is controlled through a set of six CSS attributes. The first two,
height, are the most common and are used to
set the absolute width and height of the element. The other
max-width—are handy CSS attributes
(particularly when working with images), but not commonly used in
Actually, an element’s
height are factors of several
attributes, including the element’s
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
auto (clip and provide
scrollbars only if some of the content is hidden).
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 ...