Fluid Boxes Problem

Ok, so I'm designing a new website template and I've run into a problem.
I figured out how to make a fluid content box that's made out of a top, middle, and bottom piece that spans the desired width. That works great.

I tried to apply the same concept to basically what amounts to a fluid height, two column setup using the two boxes for the columns. It works fine when I only have the middle pieces. But when I put in the top and bottom pieces for each box they don't sit where they are supposed to like the aforementioned working box.

Here is a link to the template page: http://www.stuorg.iastate.edu/akpsi/test/
Here is a link to the css file: http://www.stuorg.iastate.edu/akpsi/test/default.css

The css of interest is:

/*==================Content - Two Fluid Height Content Column Boxes==================*/
#leftbox_top {
	float:left;
	position:relative;
	display:block;
	width:450px;
	height:24px;
	margin-top:0px;
	margin-left:20px;
	background-image: url('images/columnbox_top.png');
}
#leftbox_background {
	float:left;
	position:relative;
	display:inline-block;
	width:450px;
	height:auto;
	padding-top:5px;
	padding-right:10px;
	padding-bottom:10px;
	margin-top:0px;
	margin-left:20px;
	background-image: url('images/columnbox_background.png');
	background-repeat: repeat;
	padding-bottom:15px;
}
#leftbox_bottom {
	float:left;
	display:inline-block;
	position:relative;
	width:450px;
	height:28px;
	margin-left:20px;
	background-image: url('images/columnbox_bottom.png');
}
#rightbox_top {
	float:right;
	position:relative;
	display:block;
	width:450px;
	height:24px;
	margin-top:10px;
	margin-right:10px;
	background-image: url('images/columnbox_top.png');
}
#rightbox_background {
	float:right;
	position:relative;
	display:inline-block;
	width:450px;
	height:auto;
	padding-top:5px;
	padding-right:10px;
	padding-bottom:10px;
	margin-right:10px;
	background-image: url('images/columnbox_background.png');
	background-repeat: repeat;
	padding-bottom:15px;
}
#rightbox_bottom {
	float:right;
	display:inline-block;
	position:relative;
	width:450px;
	height:28px;
	margin-right:10px;
	background-image: url('images/columnbox_bottom.png');
}

Code (markup):

I am open to suggestions or solutions to remedy this problem.
Thanks

 

Problem has been fixed by encapsulating each column into a separate div and floating left and right accordingly.