Essa seria a marcação principal:

<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>

Onde (apesar de existirem muitas outras regras que podem ser vistas no link, estas são as larguras)

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

O problema é que .lacarta e #sidebar não estão flutuando um ao lado do outro (isso só acontece no IE8 ou inferior)

Pode ser testado aqui:http://goo.gl/ksFQI (Se você comparar com o firefox / chrome, verá que a barra lateral não está no lado direito do container.)

Verifiquei com as ferramentas do desenvolvedor do IE8 que o contêiner parece ser grande o suficiente para os dois elementos.

Alguma idéia do que eu perdi?

-EDITAR-

IE atual:

Procurado (como no Firefox):