Div在IE8中不会漂浮

Question

这将是主要标记:

<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开发人员工具,该容器似乎对于这两个元素都足够大了.

知道我错过了什么吗？

-编辑-

目前的IE:

想要(像在Firefox中一样):

Answer 1

实际上,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>