导航滑动效果出错，请高人指点！！！！！！

麻烦各位给看一下，怎么鼠标移到后面的标题上，内容就往下错位了？怎么解决阿？谢谢了！！

<style type="text/css">
<!--
.tabs{float:left;width:567px; margin:0;}
.tabs_title{float:left;width:567px; height:22px;}
.tabs_image{float:left;width:87px; height:22px;}
.tabs_title_01{float:left;width:50px; height:20px;padding-left:30px;padding-top:2px;margin:0;background:#FFEEFE; cursor:hand;color:#F769FB;}
.tabs_title_02{float:left;width:50px; height:20px;padding-left:30px;padding-top:2px;margin:0;background:#F9DAFA; cursor:hand;color:#F769FB;}
.tabs_title_03{float:left;padding:0;width:0; height:0px;margin:0; overflow:hidden;color:#F769FB;}
.tabs_content{float:left;width:567px;}
-->
</style>

<SCRIPT language=JavaScript>
var tID=0;
function showTabs(ID){
if(ID!=tID){
TabTitle[tID].className='tabs_title_01';
TabTitle[ID].className='tabs_title_02';
TabContent[tID].style.display=&#

把tabs_content{float:left;width:567px;} 改为
tabs_content{width:567px;} 就可以了

float 属性的说明:

当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。

所以tab1还是占了位了.

<style type="text/css">
<!--
.tabs{float:left;width:567px; margin:0;}
.tabs_title{float:left;width:567px; height:22px;}
.tabs_image{float:left;width:87px; height:22px;}
.tabs_title_01{float:left;width:50px; height:20px;padding-left:30px;padding-top:2px;margin:0;background:#FFEEFE; cursor:hand;color:#F769FB;}
.tabs_title_02{float:left;width:50px; height:20px;padding-left:30px;padding-top:2px;margin:0;background:#F9DAFA; cursor:hand;color:#F769FB;}
.tabs_title_03{float:left;padding:0;width:0; height:0px;margin:0; overflow:hidden;color:#F769FB;}
.tabs_content{float:left;width:567px;}
-->
</style>

<SCRIPT language=JavaScript>
var tID=0;