Verticaly Align 3 Column DIV in IE6

So I'm trying to center vertically align a three-column DIV section in one of my pages. I'm able to align the DIVs one after another but I can't align the content with in the DIVs. I'm no CSS guru so that could be part to blame but perhaps IE6 doesn't support the vertical-align rule on DIVs.

Can someone shed some light on this?

Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	margin:0;	
	padding:0;
	color:red;
}
#header {
	width:100%;
	background-color:#F2E9E1;
	height:100px;
}
#leftcolumn {
	background-color:rgb(28,20,13);
	min-height:300px;
	height:auto !important; 
	height:300px;
	width:115px;
	float:left;
	margin:0;
	padding:0;
	vertical-align: middle;
}
#centercolumn {
	background-color:rgb(203,232,107);
	min-height:300px;
	height:auto !important;
	height:300px;
	vertical-align: middle;
}
#rightcolumn {
	background-color:rgb(28,20,13);
	min-height:300px;
	height:auto !important;
	height:300px;
	float:right;
	width:115px;
	vertical-align: middle;
}
#footer {
	background-color:rgb(242, 233, 225);
	width:100%;
	height:75px;
	text-align:center;
	clear:both;
}
#wrap{background-color:rgb(203,232,107);}
</style>
</head>
<body>
	<div id="header">Header</div>
	<div id="wrap">
		<div id="leftcolumn">Left Column</div>
		<div id="rightcolumn">Right Column</div>
		<div id="centercolumn">Content</div>
	</div>
	<div id="footer">Footer</div>
</body>
</html>

vertical-align doesn't work properly on many browsers. There are tricks to get this working, try to search this on google...