Absolutely-positioned DIVs vanished in Internet Explorer (all versions, including 7), in a recent project I’ve been working on. Gasp! What, a bug in Internet Explorer? Surely not! But, when I tried to fix what I thought was the ‘Peek-a-boo’ bug, I soon found that this was one I had not seen before. I spent a couple of hours trying to fix it, before giving up and trying a different layout technique altogether.

A few days later, I introduced another absolutely-positioned DIV into the new layout, and the same thing happened again. Frustrated and annoyed, I decided to get to the bottom of things. I wrestled with Google for what seemed like an eternity before finding a blog entry which mentioned an obscure bug about vanishing DIVs. I’d love to cite the page, but I lost the bookmark and can’t find it any more.

It’s common practice to completely take DIVs out of page flow by positioning them absolutely, relative to a parent DIV which is relatively-positioned (usually with zero offset). I usually try to avoid positioning DIVs, because it often creates more trouble than it’s worth, but sometimes they are just what is needed.

But, it seems that, when an absolutely-positioned DIV is placed adjacent to a floated DIV in HTML, it sometimes vanishes in Internet Explorer (all versions). It disappears completely, making this a very difficult bug to track down. The fix is straightforward: place another non-floated tag between the neighbours, and it magically reappears! Bizarre.