CODEWITHSUNDEEP
css
Samantha J T Star
Samantha J T Star

Reputation: 32808

What purpose does overflow: hidden; serve?

I have a web page with a header area in the middle. Elements are then part of the header. Can someone explain what overflow: hidden; does here. I don't understand why I need it or what it does.

#hdr_mdl {
    margin: 0 auto;
    overflow: hidden;
    width: 980px;
    z-index: 10;
    height: 50px; 
}

Upvotes: 10

Views: 17917

Answers (6)

Rob W
Rob W

Reputation: 349042

overflow: hidden prevents scrollbars from showing up, even when they're necessary.

Explanation of your CSS:

  • margin: 0 auto horizontally aligns the element at the center.
  • overflow: hidden prevents scrollbars from appearing.
  • width: 980px sets the width of the element to be 980px.
  • z-index: 10 causes the element to stay on top of elements without a defined z-index, or elements with a z-index below 10, or elements with a z-index of 10, but defined before the current element.
  • height: 50px sets a height of 50px.

Upvotes: 12

UserName Name
UserName Name

Reputation: 313

When overflow: hidden is added to the container element, it hides its children that don’t fit in the container.
Example:

.overflowhidden {
 background: green;
 width: 10rem;
 height: 10rem;
 overflow: hidden;
}
<div class="overflowhidden">
 This container has the style overflow:hidden. Text that does not fit becomes hidden. This is a very long sentence of text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text even more text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text this is the end of the sentence.
</div>

Upvotes: 3

user3422961
user3422961

Reputation: 1

if you use overflow hidden for a particular content than the overflow is clipped for this content, and the rest of the content will be invisible. for clear the matter visit w3school http://www.w3schools.com/cssref/pr_pos_overflow.asp

Upvotes: 0

c69
c69

Reputation: 21507

overflow specifies what a browser should do, when content is bigger than block dimensions. overflow:hidden means 'hide it and preserve initial block dimensions'.

Upvotes: 0

Dennis
Dennis

Reputation: 14477

Explanation of the overflow property: CSS overflow Property

Interactive example of the overflow property: Play it

Upvotes: -2

xXPhenom22Xx
xXPhenom22Xx

Reputation: 1275

If the content in #hdrPmdl was to spill over 50px it will not allow the browser to insert scrollbars into the DIV. If the DIV doesnt contain dynamic content and the size will always remain static then it is probably not needed as the content will no be > 50px

Upvotes: 0

Related Questions