我想让left里面的left_t和left_b在left里面上面排列，请如如何写代码？请高手赐教，谢谢
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>混合布局练习</title>
<style type="text/css">
body{margin:0;padding:0}
div{ text-align:center; line-height:30px}
.top{height:100px; width:90%; background:#FF9900; margin:0 auto;}
.head{height:100px; width:1000px; margin:0 auto; background:#FF3333}
.main,.left,.right,.substr_l,.substr_r{height:500px;}
.main{ width:1000px; margin:0 auto;}
.left{width:300px; float:left; background:#660000}
.left_t{height:200px; background:#FF66CC; margin:0 0 300px 0;}
.left_b{height:300px; background:#FFFF00; margin:200px 0 0 0;}
.right{ width:700px; float:right; background:#33FF00}
.substr_l{width:300px; background:#330000; float:left;}
.substr_r{width:400px; background:#333300; float:right;}
.footer{height:100px; width:90%; background:#0000FF; margin:0 auto; }
.foota{height:100px; width:1000px; margin:0 auto; background:#FF00FF; clear:both;}
</style>
</head>
<body>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left">
<div class="left_t> 我在左边上面</div>
<div class="left_b">我在左边下面</div>
</div>
<div class="right">
<div class="substr_l"></div>
<div class="substr_r"></div>
</div>
</div>
<div class="footer">
<div class="foota"></div>
</div>
</body>
</html>
