Simple positon/height problem (I think?)

[fri3ndly]

Hi there

 

I have a left column menu and I would like the buttons to appear at the top and the rest of the column to be height 100%.

 

I have achieved this, but the column really is 100% and will not stop at the footer like I assumed it would.

 

Please can someone guide me in the right direction?

 

CSS:

#menu{
float:left;
height:100%;
background-color:#FFFEAB;
position:relative;
}
#menu ul{
margin:0;
padding:0;
width:236px;
}
#menu li{
list-style:none;
background-color:#111153;
display: inline;
}
#menu li a{
display:block;
background-color:#111153;
padding-top:5px;
padding-left:30px;
color:#FFFEAB;
font-size:13px;
text-decoration:none;
height:25px;
}
#menu ul li a:hover{
background-color: #353A4F;
}
#footer{
height:30px;
background-color:#EEEEEE;
width:auto;
}

 

HTML:

<div id="menu">
	<ul>
	  <li><a href="#">Home</a></li>
	  <li><a href="#">About Us</a></li>
	  <li><a href="#">International Services</a></li>
	  <li><a href="#">Corporation Tax</a></li>
	  <li><a href="#">Personal Tax</a></li>
	  <li><a href="#">Value Added Tax</a></li>
	  <li><a href="#">Company Secreterial Services</a></li>
	  <li><a href="#">Contact Us</a></li>
	</ul>
</div>
<div class="clear"></div>
<div id="footer">
© 2008 Company | Designed Web Company</div>

[sKunKbad]

Design the page with a background image that repeats in the y direction, giving the appearance of a sidebar (left column) that goes 100%.