CSS Display Bugs in IE

Float Drop Bug

This bug occurs when you have a floating box and the content that should be next to it is pushed underneath. It is a well known bug and has many solutions. The best solution is to avoid using CSS and use tables for this kind of layout if you must target IE 6. Sometimes this is not possible, thus the fix must be accomplished by hacking at the CSS until it does what you need.

As an example, suppose you have a fixed width main content area, say 800 pixels wide. On the left is a floating sidebar that has float: left and is 200 pixels wide. We want the main body of content to fill the rest of the space.

  <div class="main-content-area">
    <div style="float: left;">
       Sidebar content goes here.
    </div>
    <div class="body">
       Rest of content should flow around the sidebar
    </div>
  </div>

In IE, the contents in the body can end up below the sidebar rather than to the right of it. To fix this, make sure all content in body is less than the width of the body area, which is 800 - 200 = 600 pixels wide. Then modify the body CSS definition,

.body {
  display: inline;
}