Container set to 100% but is cutting off half way down page

I have my container div, html and body set to 100%. Container div also has a min-height of 100%. For some reason the container div is not scaling with the height of the content of the rightside div. Any ideas?

Here's the css:

html {
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
background: #000;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
#container{
background-color: #000000;
width: 1000px;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
}

#leftside {
width:149px;
height: 100%;
background-image: url(images/bgimage.jpg);
background-repeat: repeat-y;
float: left;
}

#rightside {
width: 700px;
border: 0;
height: 100%;
background-color:#000;
float: left;
}

Here is the page http://www.sandiegostair.com/about_san_diego_railings_stairs.html

Any ideas as to how I can get the container to be 100% so the left side image will repeat to the bottom of page?

Hello absolutechele,
It is going 100%.
When you set #container to 100%, it goes the full height of the browser window...and that's it. If your content is longer and you scroll some more screen into view, the container already went 100% and it's not going more just because your scrolling.
I hope that explained it.

Have a look at this full height layout - http://nopeople.com/CSS/full-height-layout/index.html - view the source to see how it's done.