html,
body {
	font-family:Book Antiqua,Arial, Helvetica, sans-serif;
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
    text-align:center;
	background:url(images/header.jpg) repeat-x;
	height:107px;
}

#header img{
padding-top:15px;
}
h2{
font-family:"Berlin Sans FB";
}
#body {
   margin:0 auto;
   width:850px;
   padding:10px;
   padding-bottom:140px;   /* Height of the footer */
}


#left{
float:left;
width:150px;
}

#left li.sub a{
	background:#FFFFFF;
	text-decoration:none;
	color:#800080;
	margin-bottom:0px;
	padding-left:30px;
}

#left li.sub a:hover{
	background:#FFFFFF;
	text-decoration:underline;
}

#left li{
	list-style:none;
}

#left li a{
padding-left:5px;
text-decoration:none;
min-height:20px;
width: 120px;
display:block;
color:#FFFf00;
background:#800080;
margin-bottom:5px;
}

#left li a:hover{
background:#ffff00;
color:#800080;
}


#right{
	margin-left:200px;
	width:650px;
	padding-top:10px;
	text-align:left;
	
}
#clearfloat{
clear:both;
line-height:0px;
font-size:1px;
height:0px;

}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:140px;   /* Height of the footer */
   background:url(images/footer1.jpg) repeat-x;
}
And one simple CSS rule for IE 6 and 5.5:

#container {
   height:100%;
}