CSS: 3 Columns Centered?

Hi all,

I am trying to layout a page for a client using purely CSS. I am running into some difficulty getting my layout to work and I suspect it is a problem with something small.

The page is: http://vangoblinds.com/templates/sitewide002.dwt.cfm

The relevant css is:

body{
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
font-size: 100%;
text-align:center;
background-color:#FFFFFF;
background-image:url(../img/sitewide/gradientstep_vertical.jpg);
background-repeat:repeat-x;
}

/*LAYOUT Divs*/
#wrapper{
width: 770px;
margin:10px auto;
padding:0px;
text-align:left;
}

#banner{
height:75px;
background-image:url(../img/vangocutout.gif);
background-repeat:no-repeat;
padding-bottom:5px;
}

#content{
margin-left:200px;
width:400px;
padding:0px;
}

#leftcolumn{
width: 170px;
height: 150px;
float:left;
}

#rightcolumn{
width: 145px;
height: 175px;
float:right;
}

#footer{
border-top: 1px solid #666666;
color: #666666;
clear:both;
margin-top:10px;
font-size:70%;
height:1%;
}

/*FLOAT Properties*/
.container{
width:99%;
float:right;
}

.leftimage{
float: left;
margin-right: 5px;
}

.rightimage{
float: right;
margin-left: 10px;
}

.clearit{
clear:both;
display:block;
background-color:green;
}

An ideas why the rightcolumn is pushing itself down? I have looked at the outlines of the DIVs w/ Firefox's Web Dev tools and it just seems to have an imaginary margin. Any help would be greatly appreciated as I plan on using this layout for a couple of clients.

Thank you.
-Shks

I found the answer to my own question at a wonderful tutorial on http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

The answer was simple. I had to switch the order of the DIV tags. So that the flow in the HTML is:

wrapper
header
leftcolumn
rightcolumn
content
footer

Voila!