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.