Div 在 IE8 中不会浮动

这将是主要标记：

<div class="mancha">
    <div class="logo"></div>    
    <div id="content-area" class="espacio">
             <div class="eltitular">HEADER</div>
             <div class="lacarta">LEFT CONTENT</div>
             <div id="sidebar">RIGHT CONTENT</div>
        </div>
</div>

其中（尽管可以在链接中看到更多规则，但这是宽度）

.espacio{
    margin-left: 192px;
    background: transparent;
        width:808px !important
}
.lacarta{
        width:595px;
        float:left;
}
#sidebar{
        width:210px;
        float:right
} 

问题是 .lacarta 和 #sidebar 没有并排浮动（这只发生在 IE8 或更低版本中）

可以在这里测试：http://goo.gl/ksFQI（如果与 firefox/chrome 进行比较，您会发现侧边栏不在容器的右侧..）

我用 IE8 开发者工具检查了一下，容器似乎足够大，可以容纳这两个元素。

知道我错过了什么吗？

-EDIT-

Current IE:

Wanted (like in Firefox):

实际上，IE8 中存在一个错误，即右浮动元素似乎被清除：左。

http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned- Differently-than-internet-explorer-7。 ASPX

如果您根本不想向 HTML 添加任何内容，您可以稍微重组它以进行快速修复。将右浮动sidebar首先，即：

<div id="content-area" class="espacio">
  <div class="eltitular">HEADER</div>
  <div id="sidebar">RIGHT CONTENT</div>
  <div class="lacarta">LEFT CONTENT</div>
</div>