This property is not setting the dimensions of an element, but it's setting the manner of displaying
the content of the property if that is larger than what the height and width properties allow that element
to have. It works with block level elements, not inline elements.
Example: We set up a div with the width and height of 150 pixels each, and then we will put in an image
with a larger size. Let's see how that will look.
So, we see the div (I have put a border around it), and we see the image which sticks out to the right, because
it's wider than 100 pixels. The rest still gets displayed. And here comes overflow into play:
-
overflow:visible;
-
is the normal behaviour, as we have seen it in the example above, any part of the content that is
outside of the containing element will still get displayed.
-
overflow:hidden;
-
will hide anything that lies outside of the containing element.
-
overflow:scroll;
-
will also hide anything that lies outside of the containing element. In addition, it will add scrollbars
(even if nothing gets clipped).
-
overflow:auto;
-
like 'scroll' this will clip parts outside of the containing element, and it will provide scrollbars, too,
but only if necessary.
Mainpage
