CSS Display Bugs in IE

Float Drop Bug

This bug occurs when you have a floating box and the content is pushed under the box instead of floating around it. 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.

The common example is 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.

  <div class="main-content-area">
    <div class="sidebar">
       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" might end up below the sidebar rather than to the right of it. To fix this, make sure the content is less than the width of the body area, which is 800 - 200 = 600 pixels wide.