CHAPTER 6 ■ BOX MODELS PROPERTIESOverflow
Problem You want to control how a block handles the situation when its content overflows its
bounds horizontally and vertically.
Solution CSS provides the overflow property to control how overflowing content is handled.
You can set overflow to one of four constant values: visible, hidden, scroll, or
auto. The default value is visible. visible allows overflowing content to be
rendered outside the containing block. hidden hides the overflowing content and
does not provide scrollbars. This prevents a user from scrolling overflowed content
into view. scroll clips the overflowing content and provides scrollbars so the user
can scroll the overflowed content into view. auto works like scroll except that it
shows scrollbars only as needed.
Pattern SIZED_BLOCK_SELECTOR { overflow:visible; }
or
SIZED_BLOCK_SELECTOR { overflow:hidden; }
or
SIZED_BLOCK_SELECTOR { overflow:scroll; }
or
SIZED_BLOCK_SELECTOR { overflow:auto; }
Location This design pattern applies to sized block elements that have width and/or height^
set to a measurement or percentage.
Exceptions Internet Explorer 6 implements overflow:visible incorrectly. Instead of allowing
content to overflow the block, it expands the width and/or height of the block to
accommodate the content. Internet Explorer 7 fixes this flaw.
Tips It’s usually best to avoid using overflow:hidden, overflow:scroll, or
overflow:auto because users get frustrated when you truncate content or require
them to scroll.
This property is needed only when you size a block smaller than its content. If you
use shrinkwrapped and stretched blocks, you don’t need to use this property, and
your layouts will dynamically expand as needed to display their content.
CSS 3 defines two properties, overflow-x and overflow-y, that can be used in place
of overflow. They separately direct how horizontal and vertical overflow should be
handled. All major browsers support them. For example, you can always display one
scrollbar and let the other scrollbar appear as needed using overflow-x:scroll and
overflow-y:auto. You can also hide overflow in one dimension and scroll overflow
in the other using overflow-x:hidden and overflow-y:scroll.
Example To fit the example on one page, some code is omitted. The example shows enough
HTML to create one of the overflow divisions, and it contains the four CSS overflow
rules.
Related to Box Model, Inline Box, Table Box (Chapter 4); Width, Height, Stretched (Chapter 5);
Atomic (Chapter 6); Screenreader Only (Chapter 10); Nowrap (Chapter 11); Replaced
Text (Chapter 14); Sized Columns, Undersized Columns (Chapter 16); Tabs (Chapter
17)