Home > DeveloperSection > Forums > percentage width child in absolutely positioned parent with div not work
jayprakash sharma
jayprakash sharma

Total Post:117

Points:821
Posted on    February-11-2013 1:15 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 1 Reply(s)
 947  View(s)
Rate this:

Hi Everyone!

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 IE7, 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?

Thanks in advance



AVADHESH PATEL

Total Post:604

Points:4228
Posted on    February-11-2013 6:40 AM

Hi Jayprakash!

You can try this way

<html> 
<head>
 <style> 
#div 
 position: absolute; 
 left: 200px;
 top: 200px; 
 width: 100%; 
 height: 80%;
 background: #LightBlue; 
 #child 
 width: 80%; 
 height: 60%; 
 background: #LightGray; 
 #divrel 
 position: relative; 
 left: 25px; 
 top: 25px;
height: 25px;
 width: 50%; 
 background: LightGreen; 
</style> 
</head> 
 <body>
 <div id="div">
 <div id="divrel">
</div> 
 <div id="child">
</div> 
 </div>
 </body> 
</html>

I hope it resolve your problem

Don't want to miss updates? Please click the below button!

Follow MindStick