Question: This would be the main markup:

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

```

Where (allthough there are many more rules wich can be seen in the link this are the widths)

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

```

The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)

It can be tested here: <http://goo.gl/ksFQI> (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)

I checked with the IE8 developer tools that the container seems to be big enough for both elements..

Any idea what I missed?

-EDIT-

Current IE:
![enter image description here](https://i.stack.imgur.com/C9cXX.png)

Wanted (like in Firefox):
![enter image description here](https://i.stack.imgur.com/ggfjd.png)

Answer: 
Add parent container:

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

```
What exactly the Prob is...?? I just Tested the link and found those menu were not aligned .. and here the solution is `.menu li{ float:left}` .. for more jus put a screen shot if Possible :)