3 column layout CSS problem

Hi, Im new to CSS and i am trying to design a simple werbsite with the 3  column layout.

When im using the menu DIV in my HTML, the menu is not stretching vertically till the footer, even if i set the Height =100% ( Look at the MENU class in the attached CSS )

<div id="Menu" style="width: 183px">
        <asp:Menu ID="Menu1"  StaticHoverStyle-BackColor="ButtonShadow"  runat="server" Font-Bold="True" Font-Underline="True" ForeColor="#C00000"></Menu>

I want my menu  column to be dynamic and the menu background should adjust its height, so that it stretches up to the footer. Does anyone has some idea?


Portion of my CSS file
#container
{
    width:780px;
    margin:0 auto
}

#Header
{
      height:120px;
      width:780px;
      margin-top:10px;
      line-height:80px;
      border-style:solid;
      border-width:1px;
      background-image:url(banner_paws.jpg);
      background-position:right;
      background-repeat:no-repeat;
      
}
#Header Logo
{
      
      background-image:url(logo.jpg);
      background-position:right;
      background-repeat:no-repeat;
}

#ContentHolder p
{
      line-height:1.4;
      text-align :left;
      font-family:Book Antiqua;
 }

#ContentHolder
{
  padding :10px;
  width:60%;
  text-align:justify;
  float:left;
}

#ContentWithoutHeader
{
  width:780px;
  border-width:1px;
  border-style:solid;
  border-color:Black;    
}

#Menu
{
    float:left;
    /*width:30%;
    Height:100%;*/
    background-color:#eee;
   
   
}
#footer{background: #333;color: #FFF; text-align:center;}
#footer p{margin:0;padding:5px 10px;}
#footer{clear:both; width:100%}





Start Free Trial