A little help with applying WordPress to my current website

Hello,
I’m currently adding WordPress to my already existing website. I know, you can make your whole website and run it out of WordPress, but I’m not doing that.

I know a good amount of how WordPress is laid out and what I need. So not having problems with anything with that. Also, my current template is missing quite a few pages, and needs some housework done… I know. I’m just trying to get the bugs out visually first.

Alright,
So the small problem I’m having is that my #copyfade DIV is not ending when the #copy div ends. It seems like my #copyfade just keeps going down to the very bottom of the page. I was not having this problem before I put the WordPress code the #copy DIV.

I’m not really sure why this would be happening because everything is being contained IN #copy DIV, but for some reason now the #copyfade is kinda acting weird.

Here is the URL to the blog:
http://www.joblesspunkdesigns.com/blog/

Here is to my sylesheet:
http://www.joblesspunkdesigns.com/css/stylesheet.css
Here is my Word Press Sylesheet:
WP Stylesheet
(I know, I will condense it down to 1 SS, but I’m just trying to get it working right now)

Here is the CSS code for the #copy and the #copyfade:

#copyfade {
	width:900px;
	height: auto;
	margin-top: -4px;
	margin-bottom: -4px;
	text-align: center;
	background-repeat: repeat-y;
	background-image: url(../images/copyfade.png);
}

#copy {
	width: 840px;
	height: auto;
	margin: 0 auto;
	color: #FFF;
	padding-top: 53px;
	padding-bottom: 14px;
	text-align: left;
}

Here is the HTML layout (just blank):

<div id="copyfade">
  <div id="copy">
  </div>
</div>

`
Again, I’m not really sure why only the #copyfade div is being pushed all the way down while all the WP content is fitting fine inside the #copy DIV…

Thank you for your help.
-tim