Divs wont float in IE8

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:

Wanted (like in Firefox):

Answer 1

Actually, there is a bug in IE8 where right-floated elements seem to clear:left.

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

If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:

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

Answer 2

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>

Answer 3

Does this jsfiddle fix it: http://jsfiddle.net/hgrHq/

.lacarta{
    width:590px;
    float:left;
}

Just reduced the width of .lacarta a bit.

As an aside, you might want to consider a responsive grid system for laying out your coulmns like this. For example:

http://cssgrid.net/

http://semantic.gs/

Then you won't have lining up issues like this ... and it'll respond to all screen sizes.

Answer 4

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