Internet Explorer 6 sometimes hides some or all of the main content of the div (examples 2 and 5 have their titles missing); additionally in Internet Explorer 5 and 6, if the container is given position: relative, the floated items disappear (example 4). Contrary to other reports, no spacer div of any sort is necessary to provoke this bug – none is in use in the examples given here. Scrolling down to hide the missing section and then back up ‘cures’ the problem, but this isn’t exactly a viable solution.

Other sites have noticed this problem, including evolt.org and Position Is Everything (the Peekaboo bug, with extra funny behaviour with links :) ), and their solution is to add position: relative to various elements; either the items that disappear (evolt.org), or both the container div and every floated item within it (Position Is Everything). This isn’t straightforward, as you have to cover every possible element, and it also unfortunately leads to other bugs with position: relative, notably in IE5 on the Mac. Another solution mooted in Position is Everything and in the comments on evolt.org’s page is giving the container div a width, which does appear to cure the problem, but may be impossible to implement if the div has borders or margins.

My solution is simpler: give the container div a line-height. The default line height of browsers appears to be around 1.1-1.2, so setting line-height to around that provides no or hardly any visual change, but cures the bug in IE.