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;
}
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 centeroverflow:hidden
prevents scrollbars from appearingwidth: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 elementheigh:50px
- a height of 50px
.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With