IE7-/Win: A box with position:absolute next to a float may disappear

In the following test cases a relative positioned box contains, in the source code:

In IE7-/Win, depending on the source order of these contained elements and sometimes on other factors like the hasLayout status of the clear and the width of the float, the absolutely positioned box may disappear. Before any case the contained elements and their source order are stated, as well as the result.

Notes: The relative container has a fixed width, so it has hasLayout. Without this, there are further problems besides the disappearing of the AP box. hasLayout also makes the container to enclose the float even in absence of the clear element. Such enclosing is obtained in other browsers with a :after content.

Test 0: AP box only. OK (Note: RP box has no in-flow content, its height collapses.)

Test 1: AP box, float, clear (with hasLayout.) AP box doesn't show up.

Test 1b: AP box, float, clear (with NO hasLayout.) OK.

Test 2: float, AP box, clear (with hasLayout.) AP box doesn't show up.

Test 2b: float, AP box, clear (with NO hasLayout.) OK.

Test 3: float, clear (with hasLayout), AP box. OK.

Test 4: AP box, float (narrower than container.) OK.

Test 4a: AP box, float width:100%. AP box doesn't show up (in IE6-.)

Test 4b: AP box, float width:100% margin-right:-3px. OK.

Test 5: float (narrower than container), AP box. OK

Test 5a: float width 100%, AP box. AP box doesn't show up (in IE6-.)

Test 5b: float width 100% margin-right:-3px, AP box. OK.

The above not working cases (1, 2 in IE7-; 4a, 5a in IE6-) are fixed if there is an extra box between the AP box and the float.

Test 6: Like 1, with an extra box between AP and float. OK.

 

Test 7: Like 2, with an extra box between AP and float. OK.

 

Test 8: Like 4a, with an extra box between AP and float. OK.

 

Test 9: Like 5a, with an extra box between AP and float. OK.

 

The extra box that fixes the problem can be empty.

Test 6b: Like 1, plus an empty box between AP and float. OK.

Test 7b: Like 2, plus an empty box between AP and float.

The extra box that fixes the problem, can be put around the AP box or around the float, instead of between them.

Test 10: Like 2, with an extra box around the AP box

Test 11: Like 2, with an extra box around the float

To fix the problem the extra box must "separate" the AP from the float.

Test 12: Like 2, plus a box before the float and the AP. AP box doesn't show up.

 

Conclusions

An AP box sometimes disappears when in the source code it is the preceding or the following sibling of a float. This condition doesn't always trigger the problem, but seems necessary for the problem to occur. So any box (even an extra dummy div) "separating" the AP box from the float in the source code (either being between them, or wrapping one of them) fixes the problem.

Some cases (4a, 5a) require as further trigger that the float has 100% width. They are easily fixed giving to the float a -3px negative margin on the side opposite to the float direction (4b, 5b). These cases do not occur in IE7 (which suggests that a different bug could be involved.)

Other cases (1, 2) require as further trigger a clear element with hasLayout. They could be fixed avoiding hasLayout on the clear element (1b, 2b), or omitting it altogether (4, 5). However these modifications are not always applicable. Moreover they may both cause other problems. See IE7- double top padding on a clear with no hasLayout and related bugs. Omission of the clear causes the margin-bottom of the float to be ignored (examples at floats and containers.)

As said previously, there are cases when the problem does not occur, even in presence of the triggering conditions. This could be related to the fact that the problem is "time-dependent", i.e. it depends on the timing of data arrival and on the rendering speed, see IE7-/Win: Time dependence of the disappearing of absolutely positioned boxes near to floats.

CSS tests home