Previous Message
Next Message

[css-d] DIV background problem

Sent by Robin Hall on 30 January 2002 11:11

Hi everyone,

My developmental web site resides at
You might need to view a few pages to see the effect I'm describing here -
try the custom design section.
(NB - by 'developmental' I mean 'it isn't finished yet...)

I have laid the pages out using DIVs positioned using CSS - I don't think
I'm doing anything particularly fancy.  On every page is a DIV called
"navbar" which contains a section menu.  This is positioned absolutely with
defined width (14em), and other divisions 'leave room' for it using
'padding-left'  This menu has a blue background.  (everything else is

So far so good.

However the navbar DIV is only as tall as it's content, and I wanted to
extend the blue color as far down as the rest of the page.
I tried adding the height statement to the style sheet :

#navbar        {position: absolute; top: 0; width: 13.5em; height: 100%;}

I have another statement (sorry I know it's messy but I am still
#navbar        {font-size: 80%; background-color: #CCCCFF; border: 0;
padding-top: 5px; padding-bottom: 7px; padding-right: 8px; padding-left:
10px; }

I assumed that the navbar DIV would then be 100% as 'high' as it's parent
element - the BODY element.  However it automatically colors 100% as 'high'
as the viewing window when I view the pages in a browser.  (Seems to be on
any browser - IE5 or 6, MZ, NS, Opera.)
If you resize the browser you can alter the amount of the screen with a blue

All good fun but not quite what I was hoping for.

Can anyone (1) explain what is happening (since the browsers all do the same
I'm assuming I misunderstood the spec.) and (2) suggest how I get the blue
stripe effect to extend over the whole page?

Previous Message
Next Message

Possibly related: