IE 3 pixel float problem, or the 'wavy alignment' problem as I like to call it

I first encountered this problem when I built my first CSS layout website. I got round it with some nasty fudgey fixes but originally put it down to my inexperience and figured I hadn't used as good a technique at constructing the page as I might. The problem I am referring to is an IE issue where floating a column to the left causes a weird left-alignment rendering where the column to the right's text, as it flows beyond the height of the left-hand column, kicks over 3 pixels and causes a kind of wave to the text. Its beautifully illustrated on the CSSplay website, http://cssplay.co.uk/boxes/floatfix.html.

I soon realised there was more going on than my inexperience as this problem continued to crop up so I investigated further and found the above fix. I merrily applied 'display: inline-block' to my stylesheet and was delighted that it fixed the problem. It didn't even break in Firefox. Then some time later I realised it fell apart in Opera. Instead of the right hand div sitting alongside the left-hand float, the right hand div would sit below. Grrrr. I realised then I would have to use a hack so the 'display: inline-block' would only apply to IE. With that in place, the page worked fine in IE, Firefox and Opera.