网页错位 CSS如何调整

Question

有个页面，左边浮动块content-area和右边浮动块sidebar不对称，右边sidebar的被挤到下面去了
但在ie8里显示正常，而其它的常用的搜狗和360浏览器都不行
是浏览器不兼容的原因吗？这种情况一般要怎么办的？
涉及到的代码有：
<div id="content" class="clearfix">
<div class="container">
<div id="content-area" class="clearfix">
<div class="entry clearfix">
<h2 class="title"><a href="">111</a></h2>
<p><p>1111</p></p>
</div>
<div class="pagination">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
<div id="sidebar">
<a href="">1111</a>
</div>

#content {clear:none;}
#content-area { float: left;/* width: 585px;*/ margin: 0px 0px 0px 30px; overflow: hidden; }
.container { text-align: left; width: 960px; margin: 0 auto; position: relative; height: 100%;}
.entry { margin-bottom: 43px; }
#sidebar { float: right; width: 255px; margin: 0px 30px 0px 0px; }
.pagination { overflow: hidden; padding: 15px 12px 0px; }
.alignleft { float: left }
.alignright { float: right; }

不知道是什么原因？还请大虾们指教。。。

Answer 1

额 你复制的页面代码是非完全的吧 都没有结束标签 - -
你的意思应该是container是一个大的容器宽度是960px 里面包含了content-area和sidebar 一个左浮动 一个右浮动 不知道是你没复制完整的关系还是布局的问题 这里的content-area和sidebar应该是平级的entry和pagination 是content-area里的内容 所以完整布局应该是这样
<div id="content" class="clearfix">
<div class="container">
<div id="content-area" class="clearfix">
<div class="entry clearfix">
<h2 class="title"><a href="">111</a></h2>
<p>
<p>1111</p>
</p>
</div>
<div class="pagination">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
</div>
<div id="sidebar"> <a href="">1111</a> </div>
</div>
</div>
还有你p标签里包p 语法上就是不正确的 完全没必要