Naturally this only happened in Internet Explorer (what else).
After a lot of digging we noticed that the misplaced content of <DIV>#3 had a
position:relativestyle (indicated as #4 in the image above). It is "well known" that IE does not handle relative positioning properly when the layout of the page change.
Luckily I chanced upon an article by Holly Bergevin et al. called On having layout which was enlightening. Understanding that IE will only respect the element's state if it have the
hasLayoutproperty quickly solved the problem.
In our specific case I used
display:inline-blockto force <DIV>#3 to have
hasLayoutset to true, which made IE respect the element's style and re-render the element's content (i.e. <DIV>#4) after re-positioning it. My only concern now is what effect this might have on rendering performance, but it will have to do for now.
Tip: you can use IE Developer Toolbar to check if an element hasLayout. It will show the
hasLayoutproperty as set to -1 if
Further credit is due to Ingo Chao who wrote relatively positioned parent and floated child – disappearance.