<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body *
{
margin:0px
padding:0px
text-align:center
}
#containner
{
width:500px
margin:0 auto
position:relative
background-color:#F4FFFF
/*top:0px*/
/*left:0px*/
}
#banner2
{
width:100%
height:100%
float:left
/*margin-left:0px*/
/*margin-top:0px*/
/*padding:0px*/
font-size:18px
}
#banner2 li
{
width:15.64%
height:100%
margin:1px
/*text-align:center*/
float:left
display:block
text-decoration:none
border-bottom-style:outset
border-right-style:outset
}
#banner2 li a
{ height:100%
color:#3399FF
text-decoration:none
display:block
/*text-align:center*/
/* margin-left:0px*/
padding:2px
background:#DDF4FF
}
#banner2 li a:hover
{
background:#005279
color:#FF6600
}
</style>
</head>
<body>
<div id="containner">
<ul id="banner2" >
<li><a href="#">首页</a></li>
<li><a href="#">你好</a></li>
<li><a href="#">嘿嘿</a></li>
<li><a href="#">美女</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">自信</a></li>
</ul>
</div>
</body>
</html>
有很多细节，如body后的*，通配选择符。为#containner增加了宽度设定，为ul标签设置了id"banner2"，取消了原来的div等，你自己比较下。我用FireFox和IE8测试了，效果都出来了。你可再用IE6试试 。还有其它居中的方法，如定位和负值空白边（负值外边距）等，这需要你对CSS更深的认识。
基础不扎实，你对浮动的理解恐怕是错的。你没发html结构出来，不知道有没问题，按你这个图来说正确的html结构应该是这样：
<div id="red">
<div>绿框，左浮动</div>
<div>篮框，左或右浮动皆可</div>
<div>黄框，绝对定位放到红框左上位置，z-index低值使其退到绿框下面</div>
</div>
<div>黑框，宽度100%</div>
id="red" 那个红框要有相对定位属性
同时这个红框里面有浮动元素，要清理浮动，否则红框会失去高度，不能把黑框挤到底部正确的位置。
