cssinternet-explorer-8css-float

Divs wont float in IE8

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)

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

Wanted (like in Firefox): enter image description here

Solution

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