Question: I have an absolutely positioned
The parent
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.
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- Is there something I'm missing here?
- Is there an easy fix for this besides the pixel-based width on the child?
- Is there an area of the CSS specification that covers this?
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 div
s 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