I recently had to deal with IE jumping floats bug and found an interesting solution. In IE static object located next to the floating object tends to jump down if it doesn't fit next to the floated object on the screen. The problem is very well documented at Curing Float Drops and Wraps. You can also see the problem here. Resize the IE window until the content won't fit on the screen.
I encountered this problem while working with the Dojo tree widget. However, most people see it creating a multi-column layout using on the floats instead tables.
I found a solution, but it's good only if you can live with fixed column width or white-space: nowrap style. I haven't found a good generic way to support text wrapping.
The problem appears because IE tries to fit all content on the visible portion of the page and assumes the object fits better when it drops (moves bellow the float). The only way to prevent the drop is to trick IE into thinking there's enough space for the content.
I found Fixing the PC IE "float drop" bug while I was doing research. It works well for the column layout, but it relies on hard-coded width. It uses MS proprietary expression style that dynamically inserts JS into CSS (very powerful. Too bad other browsers don't support this). However, I needed solution that would work with a large tree. It has many items and can expand/collapse, so it's width needs to change dynamically.
At first I tried to set expression style for every node in the tree, but it resulted in too much overhead. When tree expanded or collapsed IE froze calculating width for each node.
There can be only one expression applied to the whole tree. I needed to know current width of the tree dynamically to write one.
Dojo tree is built on divs. By default they are width: 100% and there's no simple way to get the actual tree width. I found out if I wrap the tree in a table, the table collapses to the width of its content. If the window was too small elements would still jump, but it wouldn't grow in width to fill a maximized window. The table remains just wide enough for its content.
I fixed the problem by wrapping the tree in a table and wrapping the table in a div with width: expression( firstChild.offsetWidth + 5 ); style. The table provides accurate tree width and div's expression doesn't allow the table to collapse, causing element drops.
This solution has a serious flaw. The table width doesn't change with the body width; white space in the table content doesn't get wrapped when text doesn't fit. The table will expand or collapse only if the content width changes. The end result is white-space: nowrap style applied to the elements. If text doesn't have white-space: nowrap, its width is set depending on the window width and is frozen when the page loads. When nowrap style is applied there's some consistency, but very often the text is too wide to fit on one line without wrapping. As an alternative you could fix each column width to ensure layout is consistent, but this scales poorly for different page resolutions.
This is an example of the fixed layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed columns example</title>
<style type="text/css">
* {
white-space: nowrap;
}
.leftColumn {
float: left;
width: 200px;
}
.middleColumn {
margin-left: 250px;
}
.layoutFixer {
width: expression( firstChild.offsetWidth + 5 );
}
div {
border: solid black 1px;
}
</style>
</head>
<body>
<div class="layoutFixer">
<table class="layoutTable"><tr><td>
<div class="leftColumn" id="leftColumn">Left column<br />
Left column<br />Left column<br />Left column<br />Left column<br />
Left column<br />Left column<br />Left column<br />Left column<br /></div>
<div class="middleColumn" id="middleColumn">
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br />
Middle column with loooooooooooooooong text................................................................<br /></div>
</td></tr></table></div>
</body>
</html>
Try to remove nowrap style and reload the page several times with resized browser window to see the problem I'm talking about. You can see the working demo here.
There might be a way to work around this fixed-width limitation, but I haven't found it yet.