floated divs not falling in content area

I am trying to create separate left and right divs on a page, it all works fine except that it doesnt fall centered within the wordpress content area.
http://www.jbournedesign.com/alchile/home/

This is the code i put in the pages “text” area:

<div id="homewrapper">
<div id="homecontent">Text Content for home page (bio/info/whatever)</div>
<div id="homesubcontent">
<div id="left">Left div Content</div>
<div id="right"> Right Div Content</div>
<div id="homefooter">footer area</div>
</div>
<!--End homeSubContent-->

</div>
<!--end HomeWrapper-->

And here is the CSS (placed in my themes ‘custom CSS’ area):

/*Start - Home Page content CSS*/

* {
	margin: 0px;
	padding: 0px;
}
#homewrapper {
	background-color: #D6D6D6;
	width: 690px;
	margin-right: auto;
	margin-left: auto;
}
#homewrapper #homecontent {
	background-color: #FFF;
	width: 640px;
	margin-right: auto;
	margin-left: auto;
}
a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#homewrapper #homesubcontent #left {
	width: 320px;
	background-color: #096;
	float: left;
}
#homewrapper #homesubcontent #right {
	background-color: #39C;
	width: 250px;
	float: right;
}
#homewrapper #homesubcontent #homefooter {
	clear: both;
}

/*END - Home Page content CSS*/