Overflow Hidden Overflow Auto Explanation

[Zygoma]

Buon giorno from 1 degrees C very icy wetherby UK..

In my quest to get a firmer understanding into CSS and layout principles Ive noticed alot of overflow hidden & auto gets used. Please could a sitepoint memeber give me a little theory behind whu you need to use them with floated divs.

Grazie tanto,
David

[Paul O'B]

Hi,

There are a few reasons why you would need overflow other than visible and they are listed below:

1) Overflow:hidden

a) To hide any overflow that you don't want visible. That means that any content that sticks out of the element will not be seen or interfere with anything else. However you will never be able to access the content that is hidden.

b)To create a new block formatting context in order to contain floated children (originally discovered by me some years ago and now a popular way to contain floats when visible overflow isn't required. It has some drawbacks especially if you use negative margins but is just another tool in the box).

2)Overflow:auto

a) To allow access to overflowing content within the element by means of scrollbars

b) Same as "b" as above but with the risk that you will get scrollbars where content sticks out so best to use overflow:hidden if used for containing floats.

Hope that explains it

[Zygoma]

Thanks Paul, Perfect :-)