Header won't extend all the way to the right

Any help on this would be gretly appreciated. Take a look at this page
http://www.patrioticpriorities.org/test/cl/ and tell me why the yellow
header and red nav bar will not extent all the way to the right of the
screen?

The following are my definitions for each:

div.header
{
height:130px;
background-color:#FFFF33;
position:absolute;
top:0px;
left:0px;
width:100%;
}

div.navMenuDiv
{
position:absolute;
top:130px;
left:0px;
width:100%;
height:22px;
background-color:#F7002D;
border:solid black 2px;
}

I ran my css file through the validator at w3c and it showed everything was
fine.

Thanks again

On Thu, 17 Feb 2005 08:23:26 GMT, kmoon <test (AT) test (DOT) com> wrote:

Any help on this would be gretly appreciated. Take a look at this page
http://www.patrioticpriorities.org/test/cl/ and tell me why the yellow
header and red nav bar will not extent all the way to the right of the
screen?

Screen doesn't matter. Viewport does. And in Op7.54 they are as wide as
the viewport.

div.header
{
width:100%;
}

div.navMenuDiv
{
width:100%;
}

100% Of what? Seems in Op7.54 it gets rendered as meaning 100% of the
viewport. Which is fine if my viewport is large enough to fit the entire
width of the rest of the page. If not, wel, it is not that the header
doesn't take up 100% of the viewport, it is that the rest of the page
doesn't fit in my viewport.

I ran my css file through the validator at w3c and it showed everything
was fine.

No, not fine. Just shows you didn't go wrong with the syntax and such.
Doesn't say anything on the real quality. One can screw up dramatically
with very valid css and markup both.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.

weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

"100%" is the problem - 100% of what, as others have already said. You
probably want to write:

left: 0;
right: 0;
width: auto;

Unfortunately, this doesn't work in IE because IE gets it wrong....

IE7 (http://dean.edwards.name/IE7/) is supposed to be able to fix this
but I haven't got it to work yet.

Any other work-arounds anyone?

--Phil.