CODEWITHSUNDEEP
cssoverflowhidden
max
max

Reputation: 1

Overflow hidden property won't work

Here's the code, it's outside of the container. For some reason I can't fathom the element won't hide. Is there some kind of a conflict between the properties?

#header2 {
    position: absolute;
    top: 71px;
    left: 0%;
    margin-left: -906px;
    width: 2831px;
    height: 56px;
    background:url("images/header2.gif") no-repeat;
    overflow: hidden;
}

Upvotes: 0

Views: 1147

Answers (2)

tomsseisums
tomsseisums

Reputation: 13357

visiblity: hidden; or display: none;

With visibility, you'll hide the element, but it will still alter DOM display, where, display will completely hide element, with behavior like it would've been removed.

Edit:
Huh, well, in that case, you should look at 100% height fix/sticky footer/whatever you name it and add overflow: hidden; to your container. Because of that, you should add your #header2 element as a child of container. Plus, add position: relative; to container so #header2 absolute position is calculated from container.

Actually, in this case, your container will be the new body, that's why you should add overflow to it, and make #header2 as a child.

Ofcourse, if your site isn't vertically expanding, then you could get through with adding just overflow: hidden; property to your body tag.

All that hassle is because overflow property hides inner content that overflows element dimensions. Basically, overflow works like crop.

Upvotes: 2

smottt
smottt

Reputation: 3330

I guess the answer you are looking for is display: none?

Upvotes: 0

Related Questions