By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,587 Members | 1,079 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,587 IT Pros & Developers. It's quick & easy.

Header won't extend all the way to the right

P: n/a
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
Jul 21 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Thu, 17 Feb 2005 08:23:26 GMT, kmoon <te**@test.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 |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #2

P: n/a
kmoon 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?


I think the header is the least of your worries. With my browser
settings, a lot of things on this page overlap each other. It's an
unreadable mess. This is what happens when you try to absolutely
position everything on a page.

If you don't see a problem, try increasing the text size in your browser.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #3

P: n/a
"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.

Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.