Menubar doesn't resize with the page

Thanx for looking at my question. I've been struggeling with this website for days now and can't find the solution to it. The problem is like this.
I created, in my stylesheet, 3 containers (#container, #content and #menu). This works fine and is just like I want it because I don't want my divisions to go deeper than 3 levels.
But whenever i look at it in IE the menu doesn't go further (backgroundcolor of the menu) if the text goes further than the menu. And even worse if I look at it in Firefox.

Can anybody give me a lead how to solve this because I tried all kinds of forums and nobody can answer my question.

This is my stylesheet:
/** ALGEMEEN *********************************************/
html, body{
      height: 100%
}
body{
      background-color: #978C84;
      font: 0.8em Verdana, Arial, Helvetica, sans-serif;
      height: 100%;
      margin: 10px;
      padding: 0;
}
/*********************************************************/
/** CONTAINERS *******************************************/
#container{
      background-color: #FFFFFF;
      border-bottom: 10px solid #1772A7;
      border-top: 10px solid #1772A7;
      height: 100%;
      width: 900px;
}
#content{
      background-color: #FFFFFF;
      height: 100%;
      float: left;
      padding: 5px;
      width: 680px;
}
#menu{
      background-color: #272727;
      float: right;
      height: 100%;
      width: 200px;
}
/*********************************************************/
/** NAVIGATIE ********************************************/
#menu ul{
      border: 0;
      list-style: none;
      margin: 0 0 10px 0;
      padding: 0;
}

#menu ul li {
      border-top: 1px solid #444;
      font-size: 1.0em;
      text-align: left;
      margin: 0 0 0 0;
}

#menu ul li a {
      color: #ccc;
      display: block;
      margin: 0;
      padding: 8px 5px 8px 10px;
      text-decoration: none;
      width: 185px;
}
#menu ul li a:hover {
      background: #444;
      color: #fff;
}
#menu .menuheader {
      border-top: 0;
      color: #888;
      font: normal 1.0em Arial, Helvetica, sans;
      letter-spacing: 0.2em;
      margin: 0 0 1px 0;
      padding:12px 5px 12px 10px;  
      text-transform: uppercase;
}
#menu .menuheader a {
      border-top: 0;
      color: #888;
      display: block;
      margin: 0;
      padding:0;
      width: 175px;
}
#menu .menuheader a:hover {
      background: none;
      color: #ccc;
}
/*********************************************************/

This is the temporary url of the page: http://www.df5ea.com/projects/projecten_inont/vakfotografiewimstad.nl_3/

I'm not new with CSS and XHTML but some things I just don't get the answer to so I have to ask some experts ;)
LVL 9
Sander StadSysteemontwikkelaar, Database AdministratorAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
To have firefox not use height as maximum and minimum height at the same time, you can use instead of height:100% :

height: auto !important;
min-height: 100%;
height : 100%;

Firefox supports !important, msIE not.

-r-
0
Sander StadSysteemontwikkelaar, Database AdministratorAuthor Commented:
OK that works great already, but how do i get the menu to be the same height as the content page ?
0
RoonaanCommented:
You would have to create a two-coloured background image and assign it to the container div and let it have background-repeat:repeat-y;

Then remove the backgroundcolor on the menu and content div, such that the background image shines through.

Finally add a clearing div (<div style="clear:both"></div>) just in front of the </div> of your container div. This makes sure that the container is as high as the highest one out of the menu and content div.

-r-
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Sander StadSysteemontwikkelaar, Database AdministratorAuthor Commented:
Thanx that works perfect !

0
Sander StadSysteemontwikkelaar, Database AdministratorAuthor Commented:
Do you have any websites where I can get this kind of information about across browser positioning?

I read a lot of articles about CSS so that could help me in the future.
0
RoonaanCommented:
csszengarder; positioneverything. There are many.

Doesn't css.pagina.nl exist btw?

-r-
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.