奇怪的CSS兼容性问题，IE6显示正常，IE7/FF就不正常了

我做了一个页面，大致的代码如下（抱歉，由于休假没有办公电脑不能贴出完整的代码）：
css部分：
#line1,#line2,#line3
{
  clear:both;
  margin:0 auto;
}
html部分：
<div id="content">
  <div id="line1">内部还有几个子div</div>
  <div id="line2">内部还有几个子div</div>
  <div id="line3">内部还有几个子div</div>
</div>
line1、line2、line3的划分想法是：由于div的页面独占性，每一个div占据一行
这样就有三个div占据三行而且互相不干扰。这个页面在IE6下面显示正常。
问题是：IE7，FireFox下面，line2漂到了line1上面，line3漂到了line2上面，
line1、line2只有头部显示一点。
这种情况（下面一个div层漂到其前面一个div层的上方），可能会是什么原因引起的？我想了下，是否line1、line2、line3之间没有用div分隔开？
也就是说line1、2、3不用clear:both，而是分隔层div用clear:both？
或者在line1、2、3的css里面加上margin-top:3px; ?

请问大虾，这是怎么回事哪？

div本来就是块元素...既然每一个div占据一行..还用clear:both干啥..

#line1,#line2,#line3
{
  margin:10px auto;
  width:950px;
  height:50px;
  border:1px solid #000;
}

“内部还有几个子div”，因该是这里出了问题

为什么要拿div套div呢，为什么不用li呢
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
你可以把比较大的门户网站的源代码找出来看看人家怎么写的模仿一下的

+1

其实加个宽度就行了

1.div本来就很不稳定，table比较稳定；
2.不同的浏览器出现的效果不一样也很正常，有些浏览器兼容，有些浏览器不兼容。