PERCENTAGE WIDTH CHILD IN ABSOLUTELY POSITIONED PARENT WITH DIV NOT WORK

jayprakash sharma

Total Post:117

Points:821
Posted by  jayprakash sharma
 1357  View(s)
Ratings:
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

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: percentage width child in absolutely positioned parent with div not work

    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

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!