DemoDHTML: Overflow

Overflow (IE4+, NS6-partial)

The overflow property controls what happens when the contents are larger than the specified space. This property applies to block-level elements and graphics.

The overflow property can be set to one of:

scroll hidden auto visible
using the syntax: overflow:scroll;
NC4: Overflow is not supported.

NS6: (Text)
          Scroll- Clicking on the scroll arrows or the scroll box itself to scroll the overflow area will scroll to end of page instead. Clicking in the scroll bar itself and not on the box will scroll the overflow area, as it should.
          Hidden - OK. Extra text or part of image is clipped.
          Auto - Same as for Scroll. Click carefully or the whole page moves.
          Visible- No. The text flows underneath objects further down the page.

(Image) - All seem to work OK, using arrows.

Scroll

This text fits in a division with the overflow property set to "scroll". Thus, when the text is too long to fit, scrollbars are inserted so the viewer can read all of the text.

Clip

When overflow is set to "hidden", the contents should be cut off if there is not enough room for everything! Is this working as it should??

Scroll bars as needed

If overflow is set to "auto", then scrollbars will be added as needed. So here, with text, we only need a vertical scrollbar.

Size to fit

When overflow is set to "visible", then the element (in this case DIV) is enlarged to display the entire contents. This is useful when you are not sure ahead of time how much space you will need.

What You Should See

Now let's apply the various settings for overflow to an image.
The divisions are set to 50 x 50 pixels. The image is 70 x 52 pixels.
Note how these compare to the examples above using text only.