forum

Home / DeveloperSection / Forums / percentage width child in absolutely positioned parent with div not work

Ask Question

percentage width child in absolutely positioned parent with div not work

Anonymous User 2086 11-Feb-2013

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

css-css3 css-css3 
Updated on 11-Feb-2013
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

AVADHESH PATEL

AVADHESH PATEL

11-Feb-2013
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

Liked By