Проблемы с 2-колоночной резиновой версткой в IE

[jown]

На такой HTML разметке:

<div id="wrap">
  <div id="wrap-inner">
    <div id="header">
    </div>
    <div id="main-body">
      <div id="content">                    
      </div>
      <div id="sidebar-left">                    
      </div>
    </div>
    <div id="footer">                
    </div>
  </div>
</div>

Задан стиль CSS:

#wrap
{
    max-width: 1000px;
}
#header
{
    display: table;
    width: 100%;
}
#main-body
{
    float: left;
    width: 100%;
}
#content
{
    float: right;
    width: 80%;
}
#sidebar-left
{
    float: left;
    width: 20%;
}
#footer
{
    clear: both;
}

В IE блок #sidebar-left съезжает вниз и идет после блока #content. В Opera Chrome Firefox - все ОК. Если ставишь перед блоком #content - проблема исчезает. В чем причина и можно ли решить эту проблему?

Спасибо.