100% height

[mooom]

ich habe ein zweispaltiges layout (navigation links, contentbereich rechts)
wie der titel schon sagt, sollen sowohl navigation als auch contentbereich vertikal 100% höhe haben.

trotz langer versuche klapt es einfach nicht. vielleicht entdeckt jemand den fehler.

html:

  
  
<div id="position">  
  
<div id="header"></div>  
<div id="navi-top"></div>  
<div id="main-body">  
  <div id="navi-left"></div>  
  <div id="content-box"></div>  
</div>  
  
</div>  
  

das css dazu:

  
  
body  
{  
	height:100%;  
	background-image:url("...");  
	background-repeat:repeat;  
	font-family:Verdana;  
	font-size:10pt;  
}  
  
#position  
{  
	width:920px;  
	top:12px;  
	position:relative;  
	margin:0 auto;  
	padding-bottom:0;  
	height:auto !important;  
	height: 100%;  
	min-height: 100%;  
}  
  
#header  
{  
	width:920px;  
	height:200px;  
	left:0;  
	top:0;  
	position:relative;  
	background:url("...") left top no-repeat;  
}  
  
#navi-top  
{  
	width:920px;  
	height:24px;  
	left:0;  
	top:2px;  
	position:relative;  
	background:url("...") left top no-repeat;  
}  
  
#navi-left  
{  
	width:201px;  
	left:0;  
	top:2px;  
	position:relative;  
	float:left;  
	background-color:#eee5dd;  
	height:auto !important;  
	height:100%;  
	min-height: 100%;  
}  
  
#content-box  
{  
	width:717px;  
	height:500px;  
	left:-1px;  
	top:2px;  
	position:relative;  
	float:right;  
	background-color:#eee5d0;  
}  

vielen dank im vorraus für den hirnschmalz =)