Page getting cut off in IE6

I just started a new design last night, and for some reason when I look at it in IE6 the page is getting getting cut off at the bottom. It works fine in Firefox. I have never encountered this problem before. Anyone have any idea why this is happening? I can't for the life of me figure out where I'm messing up that's causing the problem.

To see the page and of course the HTML:

http://toucanets.freehosting.net/Bennett/mebtest.html

Here's the CSS code so far:

body{
background:#000000;
height:100%;
}

#container{
position: relative;
margin: 0 auto;
width:100%;
height:100%;

}


#contents{
position: relative;
top:150px;
background:white;
color:black;
left:170px;
width:700px;
background-image: url(/Bennett/papertex.jpg); 
padding:15px;
height:100%;
}

#header{
position:absolute;
top:0px;
width:700px;
height:100px;
background:transparent;
padding:15px;
background-image: url(/Bennett/meb.gif); 
background-repeat: no-repeat;

}

#feather{
position:absolute;
top:60px;
left:10px;
width:250px;
height:242px;
background-image: url(/Bennett/feathery.gif); 
background-repeat: no-repeat;
}

#garden{
position:absolute;
background-image: url(/Bennett/gardenfade.jpg); 
background-repeat: no-repeat;
width:100%;
left:0;
top:0px;
height:500px;
}


p{
padding-left:10px;
}

h1, h2, h3, h4, h5, h6{
padding-left: 5px;
} 

Code (markup):

 

That happen because you set the content's top by 150px, it will shift the contents down. in IE6 the page is getting cut down at the bottom.

try add this at #contents
margin-bottom:150px;

it seems work at ie6 and ff

 

Thanks that fixed the problem.