CODEWITHSUNDEEP
css
John Cooper
John Cooper

Reputation: 7631

Overflow: hidden in CSS

Can anyone explain me what this overflow:hidden actually does?. I am not able to understand this concept though reading many CSS tutorials. I have two floats one on right and other left, why should i apply overflow:hidden to my header?.

I am getting confused on this property.

Upvotes: 1

Views: 759

Answers (4)

user354346
user354346

Reputation:

overflow: hidden on a container simply hides any content that flows outside of the box, as demonstrated beautifully by the following diagram (courtesy of Chris Coyier/CSS-Tricks):

http://css-tricks.com/the-css-overflow-property/

You might be using overflow: hidden as a kind of clearfix in this case, which is just a way to get a parent container to expand to the height of its floated children (as floated elements are taken out of the normal page flow). The difference between using overflow: hidden and overflow: visible on containers with floating children can be seen in the following demo.

Upvotes: 3

BoltClock
BoltClock

Reputation: 723598

overflow: hidden was never intended to directly affect floats — as shown by the other answers here its main purpose is to control content overflow, in other words doing exactly what it says on the tin — but it has an obscure side effect of causing a container to produce its own block formatting context. When this happens, the container must expand to contain its floats, even though floats are usually taken out of normal flow. This isn't usually mentioned in CSS tutorials since it's not exactly an intended purpose of the overflow property.

Note that this is not the same as clearing floats, since you're modifying the container itself and not introducing some clearing element (as is typical of a clearfix).

See also: Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

Upvotes: 1

IceArdor
IceArdor

Reputation: 2041

There are 5 values that overflow can have. They are visible, hidden, scroll, auto and inherit. By using overflow:hidden, you are forcing the content to fit into the specified dimensions without using scrollbars. Thus, only the content that fits within the dimensions will be visible, and the rest is hidden.

Perhaps this demo will help you visually see the difference: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

Sources: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Upvotes: 1

Dan Goodspeed
Dan Goodspeed

Reputation: 3560

If the content of your element is bigger than the container, it will often change the size of the container. overflow:hidden just tells it to hide whatever content doesn't fit in the container, so the container stays the same size.

Upvotes: 1

Related Questions