30 May 2004/

The SitePoint Tech Times from 26 May - I get this as E-mail, techtimes@sitepoint.com - The SitePoint Tech Times Editor
Some usefull extraction to remember for myself on float Internet Explore bug

One of the biggest pains in the butt in CSS page layout, with floated blocks becoming a common (if finicky) tool, is the Internet Explorer Peekaboo Bug. This bug can cause vast chunks of your page content to mysteriously go missing, at least until you resize the window or hover your mouse over a link.

A number of clever people have found ways to hold this bug at bay with various pieces of CSS trickery. One such method is to set position: relative on both the floated block and the blocks that disappear.

Alex recently decided to take this a step further and just have all elements use relative positioning, instead of the default static positioning. All this takes is a single CSS rule:

body * {
position: relative;
}

The difference between static and relative positioning is a subtle one. Briefly, an element with position: absolute will position itself relative to the closest ancestor that has position: relative . Applying this rule changes things so that absolute-positioned elements are positioned relative to their parent element by default.

For most elements, this will make no difference at all, except that it will put an end to the Peekaboo bug. Alex argues that this behaviour is what most people naturally expect from absolute positioning anyway, so it's no big deal.

That said, if after applying this rule your layout doesn't look quite right, you can go back and selectively add CSS rules that return required elements to position: static. Chances are, it'll be less work than identifying the source of the Peekaboo bug when it strikes.