The CSS Overflow Attribute

This attribute determines the manner in which a browser provides a visual cue to the fact that the contents inside a block element - such as divisions or forms are not all on display. Given that block elements are designed by default to expand vertically to fit their contents, all that follows only really applies if the CSS height attribute has been used to fix the height of the element. We use the code overflow:value where value is one of:

• visible: This is the default setting. Firefox and Opera allow excess content to spill out of the element. IE on the other hand ignores the assigned height attribute increases the height of the element. The latter solution may be more convenient but correct interpretation of standards requires the former.
• hidden: The excess content is hidden and no scrollbar appears to indicate that such content exists.
• scroll: This setting forces scrollbars to appear - even when they are not required.
• auto: Use overflow:auto to cause scrollbars to appear if required.

You may well wonder what happens if this attribute is set to anything other than its default value for a paragraph element. The behavior in IE and Opera is exactly the same as with a division element. Firefox, on the other hand displays a disabled horizontal scrollbar. One of the rare bugs in Firefox or merely a correct interpretation of standards? We don't know.

This is not an inherited property - i.e. in a child element, if not assigned, it takes the default value rather than the corresponding value in its parent container.

This attribute can also be assigned the setting inherit which causes it to pick up its value from the parent element.