Friday, 7 July 2017

Percentage width child element in absolutely positioned parent on Internet Explorer 7

Question: I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based width on the child div, it collapses to '0' width on Internet Explorer 7, but not on Firefox or Safari.If I use pixel width, it works. If the parent is relatively positioned, the percentage width on the child works
  1. Is there something I'm missing here?
  2. Is there an easy fix for this besides the pixel-based width on the child?
  3. Is there an area of the CSS specification that covers this?
Solution: 

The parent div needs to have a defined width, either in pixels or as a percentage. In Internet Explorer 7, the parent div needs a defined width for child percentage divs to work correctly.

Here is some sample code. I think this is what you are looking for. The following displays exactly the same in Firefox 3 (mac) and IE7.


#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}

<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

No comments:

Post a Comment