Overflow tests

The green box has dimension 100px × 100px, padding 10px, border 10px, margin 20px. The blue box (width 150px) should overflow at the right, and the red one (height 110px) at the bottom.

visible:

hidden:

auto:

overflowing elements are floated:

visible:

hidden:

auto:

In the following cases the green box has no dimensions, its width should be 100px because of its margins (left 20px, right 70px.) It contains a blue box with width 150px (except in the first case where the blue box has 100px width.)

non overflowing content:

visible:

hidden:

auto:

The above shows that without dimensions overflow:hidden/auto has no effect in IE6-/Win. Even adding hasLayout (below, with zoom:1) there is no effect.

visible:

hidden:

auto:

Other overflow tests, cases with italics creating overflow in IE7-.

CSS tests home