I have to create a fluid 100% width HTML banner. Can you guys look at the code and let me know how I can center vertically the text and if it works in IE6?

Is there a way to auto resize text (font size) when resizing window that works in older browsers?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#maincontainer{
width:100%;
display:block;
}
#greytext{font-size: 110%; color: #cccccc;}
#greentext{color: #84b740;}
#topsection{
font-family: Georgia, 'Times New Roman', Times, serif;
background-color:#ccc;
border-bottom: 7px solid #000;
line-height: 1.8em;
height: 100px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 20px;
}
.innertube{
height: 100px;
margin: 10px; 
margin-top: 0px; 
text-align: center;
}
#whitetext{
color:#fff !important;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
text-shadow: 2px 2px #333333;
</style>
</head>
<body>

<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1 id="whitetext">TEXT TEXT TEXT</h1>
<b id="greytext">dfgdfgdfgdfg</b>
</div>
</div>
</div>

</body>
</html>
Thanks!