Fluid Boxes Problem

[chrisfromboji]

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');
}


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

[chrisfromboji]

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