IE bug: An absolute positioned box disappears in some cases

This page is written by Yoshihide Jimbo (jmblog.jp) and based on IE/Win: Disappearing position:absolute boxes near to floats and clears by Bruno Fassino. (Thanks Bruno!)

日本語 | English

Summary

In the following cases, an absolute positioned box (AP Box) may be not rendered by Win/IE.

Container
{ position: relative; }
AP Box
{ position: absolute; }
float
{ float: left; width: 50%; }
float w100
{ float: left; width: 100%; }
float w100 negm
{ float: left; width: 100%; margin-right: -2px; }
clear (not present)
{ clear: both; }
clear hasLayout
{ clear: both; height: 8px; }

Tests

next »

Test 0

order in HTML source

  1. AP Box only
<div class="relative">
  <div class="ap_box"></div>
</div>

result

« back | next »

Test 1

order in HTML source

  1. AP Box
  2. float
  3. clear + hasLayout
<div class="relative">
  <div class="ap_box"></div>
  <div class="float"></div>
  <div class="clear hasLayout"></div>
</div>

result

« back | next »

Test 1b - Solution#1 for Test 1

Use the clear without the hasLayout propety.

order in HTML source

  1. AP Box
  2. float
  3. clear
<div class="relative">
  <div class="ap_box"></div>
  <div class="float"></div>
  <div class="clear"></div>
</div>

result

« back | next »

Test 1c - Solution#2 for Test 1

Put an extra box between the AP Box and the float.

order in HTML source

  1. AP Box
  2. extra box
  3. float
  4. clear hasLayout
<div class="relative">
  <div class="ap_box"></div>
  <div class="extra">extra box</div>
  <div class="float"></div>
  <div class="clear hasLayout"></div>
</div>

result

extra box

footnote

It's all right if the extra box is empty (<div class="extra"></div>).

« back | next »

Test 1d - Solution#3 for Test 1

Wrap the AP Box with an extra box.

order in HTML source

  1. <extra box>AP Box</extra box>
  2. float
  3. clear hasLayout
<div class="relative">
  <div class="extra"><div class="ap_box"></div></div>
  <div class="float"></div>
  <div class="clear hasLayout"></div>
</div>

result

« back | next »

Test 1e - Solution#4 for Test 1

Wrap the float with an extra box.

order in HTML source

  1. AP Box
  2. <extra box>float</extra box>
  3. clear + hasLayout
<div class="relative">
  <div class="ap_box"></div>
  <div class="extra"><div class="float"></div></div>
  <div class="clear hasLayout"></div>
</div>

result

« back | next »

Test 1f - Solution#5 for Test 1

Put the extra box after the AP Box and the float.

order in HTML source

  1. AP Box
  2. float
  3. extra box
  4. clear hasLayout
<div class="relative">
  <div class="ap_box"></div>
  <div class="float"></div>
  <div class="extra">extra box</div>
  <div class="clear hasLayout"></div>
</div>

result

extra box

« back | next »

Test 1g

It's not OK if you put the extra box before both the AP Box and the float.

order in HTML source

  1. extra box
  2. AP Box
  3. float
  4. clear hasLayout
<div class="relative">
  <div class="extra">extra box</div>
  <div class="ap_box"></div>
  <div class="float"></div>
  <div class="clear hasLayout"></div>
</div>

result

extra box

« back | next »

Test 2

order in HTML source

  1. float
  2. AP Box
  3. clear + hasLayout
<div class="relative">
  <div class="float"></div>
  <div class="ap_box"></div>
  <div class="clear hasLayout"></div>
</div>

result

« back | next »

Test 2b - Solution#1 for Test 2

Use the clear without the hasLayout propety.

order in HTML source

  1. float
  2. AP Box
  3. clear
<div class="relative">
  <div class="float"></div>
  <div class="ap_box"></div>
  <div class="clear"></div>
</div>

result

« back | next »

Test 2c - Solution#2 for Test 2

Put an extra box between the float and the AP Box.

order in HTML source

  1. float
  2. extra box
  3. AP Box
  4. clear + hasLayout
<div class="relative">
  <div class="float"></div>
  <div class="extra">extra box</div>
  <div class="ap_box"></div>
  <div class="clear hasLayout"></div>
</div>

result

extra box

footnote

It's all right if the extra box is empty (<div class="extra"></div>).

« back | next »

Test 2d - Solution#3 for Test 2

Wrap the AP Box with an extra box.

order in HTML source

  1. float
  2. <extra box>AP Box</extra box>
  3. clear hasLayout
<div class="relative">
  <div class="float"></div>
  <div class="extra"><div class="ap_box"></div></div>
  <div class="clear hasLayout"></div>
</div>

result

« back | next »

Test 2e - Solution#4 for Test 2

Wrap the float with an extra box.

order in HTML source

  1. <extra box>float</extra box>
  2. AP Box
  3. clear + hasLayout
<div class="relative">
  <div class="extra"><div class="float"></div></div>
  <div class="ap_box"></div>
  <div class="clear hasLayout"></div>
</div>

result

« back | next »

Test 2f - Solution#4 for Test 2

Put the extra box after the float and the AP Box.

order in HTML source

  1. float
  2. AP Box
  3. extra box
  4. clear + hasLayout
<div class="relative">
  <div class="extra"><div class="float"></div></div>
  <div class="ap_box"></div>
  <div class="extra">extra box</div>
  <div class="clear hasLayout"></div>
</div>

result

« back | next »

Test 3

order in HTML source

  1. float
  2. clear + hasLayout
  3. AP Box
<div class="relative">
  <div class="float"></div>
  <div class="clear hasLayout"></div>
  <div class="ap_box"></div>
</div>

result

« back | next »

Test 4

order in HTML source

  1. AP Box
  2. float (float's width < container's width)
<div class="relative">
  <div class="ap_box"></div>
  <div class="float"></div>
</div>

result

« back | next »

Test 4a

order in HTML source

  1. AP Box
  2. float + width:100%
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100"></div>
</div>

result

« back | next »

Test 4b - Solution#1 for Test 4a

Give a negative margin (at least -2px) to the float.

order in HTML source

  1. AP Box
  2. float + width:100% + margin-right:-2px
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100 negm"></div>
</div>

result

footnote

-1px is not sufficient to fix the problem. (See Test 4d.) But -2px is not still enough if display:inline is used on the float. (See Test 4e.)

« back | next »

Test 4c - Solution#2 for Test 4a

Put an extra box between the float and the AP Box.

order in HTML source

  1. AP Box
  2. extra box
  3. float + width:100%
<div class="relative">
  <div class="ap_box"></div>
  <div class="extra">extra box</div>
  <div class="float w100"></div>
</div>

result

extra box

footnote

It's OK if the extra box is empty (<div class="extra"></div>). And it's also all right if the extra box wraps the AP Box or the float like Test 1d and Test 1e.

« back | next »

Test 4d (additional test for Test 4b)

A negative margin -1px is not sufficient to fix the problem.

order in HTML source

  1. AP Box
  2. float + width:100% + margin-right:-1px
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100" style="margin-right: -1px;"></div>
</div>

result

« back | next »

Test 4e (additional test for Test 4b)

If you apply display:inline to the float, -2px is not enough.

order in HTML source

  1. AP Box
  2. float + width:100% + margin-right:-2px + display:inline
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100" style="margin-right:-2px; display:inline;"></div>
</div>

result

« back | next »

Test 4f (additional test for Test 4b)

A positive margin can't resolve the problem.

order in HTML source

  1. AP Box
  2. float + width:100% + margin-right:1px
<div class="relative">
  <div class="ap_box"></div>
  <div class="float w100" style="margin-right: 1px;"></div>
</div>

result

« back | next »

Test 5

order in HTML source

  1. float
  2. AP Box
<div class="relative">
  <div class="float"></div>
  <div class="ap_box"></div>
</div>

result

« back | next »

Test 5a

order in HTML source

  1. float + width:100%
  2. AP Box
<div class="relative">
  <div class="float w100"></div>
  <div class="ap_box"></div>
</div>

result

« back | next »

Test 5b - Solution#1 for Test 5a

Same as Test 4b.

order in HTML source

  1. float + width:100% + margin-right:-2px
  2. AP Box
<div class="relative">
  <div class="float w100 negm"></div>
  <div class="ap_box"></div>
</div>

result

« back | next »

Test 5c - Solution#2 for Test 5a

Same as Test 4c.

order in HTML source

  1. float + width:100%
  2. extra box
  3. AP Box
<div class="relative">
  <div class="float w100"></div>
  <div class="extra">extra box</div>
  <div class="ap_box"></div>
</div>

result

extra box