Este sería el marcado 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>

Donde (aunque hay muchas más reglas que se pueden ver en el enlace, estos son los anchos)

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

El problema es que .lacarta y #sidebar no están flotando uno junto al otro (esto solo ocurre en IE8 o inferior)

Puede ser probado aquí:http://goo.gl/ksFQI (Si se compara con Firefox / Chrome, verá que la barra lateral no está en el lado derecho del contenedor ...)

Verifiqué con las herramientas de desarrollo de IE8 que el contenedor parece ser lo suficientemente grande para ambos elementos.

¿Alguna idea de lo que me perdí?

-EDITAR-

IE actual:

Se busca (como en Firefox):