Problem with DIV's

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have a very simple page with just 2 DIVs on, a left hand menu bar and a
'main' screen

The menu bar has a different background colour to the main screen.
Everything works fine until I add a lot of content to the main screen and
the page height is greater then a screen. As soon as I scroll down my left
hand DIV's background colour disappears!

What am I doing wrong please ?



 TOP: 0px;
 LEFT: 0px;
 WIDTH: 150px;
 HEIGHT: 100%;
 MARGIN: 0px;
 POSITION: absolute;
 background-color: #C48532;

 TOP: 120px;
 LEFT: 150px;
 WIDTH: 70%;
 POSITION: absolute;
 font-size: 80%;
 font-family: 'Trebuchet MS', 'Lucida Grande',
   Verdana, Lucida, Geneva, Helvetica,
   Arial, sans-serif;
 MARGIN: 20px;
 background-color: #FFFFCC;

Re: Problem with DIV's

Chris Leonard wrote:
Quoted text here. Click to load it

there's the culprit - height:100% means "same height as the holding
block" - in this case, it means <body>. get rid of the height.

If you need the columns to be the same height, then use one of the
solutions at

oh - and lowercase code is easier to read.


Re: Problem with DIV's

Quoted text here. Click to load it


Interesting, I was going to change it all to upper case as I thought that
would be easier to read.

Site Timeline