Question

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; 
}

Answer 1

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 in before the current element
• heigh:50px – a height of 50px.