Microsoft KB Archive/295301

= PRB: Nested Elements That Use a Percentage for Height or Width Do Not Render as Expected =

Article ID: 295301

Article Last Modified on 5/11/2006

-

APPLIES TO


 * Microsoft Internet Explorer 4.0 128-Bit Edition
 * Microsoft Internet Explorer 4.01 Service Pack 2
 * Microsoft Internet Explorer 4.01 Service Pack 1
 * Microsoft Internet Explorer 4.01 Service Pack 2
 * Microsoft Internet Explorer 5.0
 * Microsoft Internet Explorer 5.01
 * Microsoft Internet Explorer (Programming) 5.01 SP1

-



This article was previously published under Q295301



SYMPTOMS
When you use Internet Explorer version 5.01 or earlier, you expect the following code to show one screen-height DIV element and one DIV element that is half the size and is contained within the screen-height element:



without div height/width specified



<BR><BR><BR><BR><BR><BR>end w/o div

However, both DIV elements appear at 50 percent of the screen's height with the scroll bar of the inner DIV elements visible.

<div class="cause_section">

CAUSE
If they are not explicitly set, the attributes of the parent DIV element conform to their child's size. The child's size is set as a percentage. Because the containing DIV element of the child has no style specified for this value, the child uses the next higher container with a size, which is the window itself in this case.

The World Wide Web Consortium (W3C) CSS2 specification at http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property states that if the height of the containing block is not specified explicitly, the value is interpreted as &quot;Auto&quot; rather than the expected 100 percent.

<div class="resolution_section">

RESOLUTION
According to CSS2 specifications, use the following code to resolve this problem: <div id=mydiv style=&quot;width:100%;height:50%;&quot;>

<div id=overWind STYLE='width:100%;height:100%;overflow:auto;background-color:#DDDDDD'>

with div height/width specified

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<BR><BR><BR><BR><BR><BR><BR><BR>end w/ div

<div class="references_section">