Css 向右浮动的DIV显示在中间，而左浮动显示在下面

我有一个宽度为960px的主内容DIV，里面有两个浮动DIV元素。以下是它的简化版本：

<div id='content'>
    <div id='main_data'>
       ....Data....
    </div>
    <div id='sidebar'>
       ....data....
    </div>
</div>

DIV#main#u数据显示在#content内居中，#边栏显示为左浮动，但在#main#u数据下方#内容没有定义的边距或填充，即使在#边栏中包含4px填充，浮动的宽度也不会超过960px

这在Firefox、IE8、Chrome、Safari和Opera中都很好，但在IE7和IE6中却不行

---

我应该补充一点，如果我在DOM中切换位置，它们会正确显示-我正试图通过将更相关的信息放在靠近文档顶部的#main_数据中来让这个站点更易于SEO访问（Wikipedia也会做同样的事情，后面的左侧边栏会出现在源代码中）。

“我不太确定你想做什么，首先你应该更清楚，但我认为你缺少的是一个清晰的元素，如

有趣的是，我准确地复制了你的代码，添加了根html标记和一些Lorem Ipsum文本来代替“…数据…”，并看到了完全相反的结果：IE7中的预期行为，但不是在FF 3.5中

对我来说，解决办法是在两个子div的边距和填充物上玩，直到布局在所有浏览器中看起来都合适为止。具体地说，我将边栏填充降低到3px，并显式地将其他两个div的边距设置为0px。但考虑到我最初的结果与你的相反，我想这对你来说也可能有所不同。
我得到的结果很好。。。可能不清楚这个问题。请使用jsfiddle.net进行演示
div#content { width: 960px; position: relative }
div#main_data { float: right; width: 755px; }
div#sidebar { float: left; width: 190px; padding: 4px }

 <div id='content'>
   <div id='main_data'>
      ....Data....
   </div>
   <div id='sidebar'>
      ....data....
   </div>
   <br style='clear:both;'/>
</div>


#content { width: 960px; }
#main_data { float: right; width: 755px; }
#sidebar { float: left; width: 190px; padding: 4px }