FIX: <DIV> Tags Are Positioned Incorrectly in IE 4.01

ID: Q182688

The information in this article applies to:

SYMPTOMS

Placing two <DIV> tags on a Web page with relative positioning causes the second <DIV> to be positioned to the right of the first. In Internet Explorer 4.0, the second <DIV> is positioned below the first.


RESOLUTION

Place a <BR> or <P> tag after the first <DIV> tag.


STATUS

Microsoft has confirmed this to be a bug in the Microsoft products listed at the beginning of this article. This bug was corrected in Microsoft Internet Explorer 5.


MORE INFORMATION

Steps to Reproduce Behavior

  1. Load the following HTML into Internet Explorer 4.01: 
    
<HTML>
<BODY>
  <DIV ID=one STYLE="position:relative;width:200"
     onclick="document.all.two.style.display = '';">
  Div One
  </DIV>

  <DIV ID=two STYLE="position:relative;width:200;display:none">
  Div Two
  </DIV>
</BODY>
</HTML>


  2. Click "Div One."


Result: "Div Two" is displayed to the right of "Div One" off the screen. If you resize the application's window, it repositions to below "Div One."

Expected Behavior: "Div Two" should be displayed below "Div One." This worked in Internet Explorer 4.0.

Placing a <BR> or a <P> after the first </DIV> corrects this problem but places an extra line break between the two <DIV> tags. This HTML works correctly: 

<HTML>
<BODY>
  <DIV ID=one STYLE="position:relative;width:200"
     onclick="document.all.two.style.display = '';">
  Div One
  </DIV>

  <BR>

  <DIV ID=two STYLE="position:relative;width:200;display:none">
  Div Two
  </DIV>
</BODY>
</HTML>


REFERENCES

Dynamic HTML section of the Internet Client SDK Help:

http://www.microsoft.com/msdn/sdk/inetsdk/help

Additional query words: 


Keywords          : kbIE401bug kbIE500fix 
Version           : 
Platform          : 
Issue type        : kbbug

Last Reviewed: April 8, 1999