Why doesn't width: 100% fill horizontal space?

[mightymid]

Hi all! I've got this snippet of css...

#banner {
z-index: 1;
display: block;
position: absolute;
width: 100%;
top: 0px;
height: 150px;
background-color: #6666cc;
border-bottom: 10px solid #cccccc;
}

...and the idea is that the banner will span the width of the viewport, regardless of screen resolution or window re-sizing.

It works fine with different screen resolutions but fails when the browser window is not maximized. Under that circumstance, the banner div shrinks to half its size and no longer accommodates the content inside it.

Why is that?

[netchicken1]

What browser?

Works OK for me in IE6

Is it not the css but whatever you have AFTER the css code?

The position absolute tag seems to hide the next line of text, so that its unseen, could that be causing the banner to act strange?

[mightymid]

Actually it's happening in all browsers. But you're right -- it's probably something after that snippet that's fouling it up. I'll keep testing. Thanks.

[doodlebee]

I would agree - remove the "position:absolute;". Keep the width at 100%, and if it's inside a wrapper div of any kind, also set that at 100% width.