Intellipaat Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (20.3k points)

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 the 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?

1 Answer

0 votes
by (40.7k points)

Try using the code given below:

I guess you are looking for the same. 

#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>

Note: The above code will display exactly the same in Firefox 3 (mac) and IE7.

Related questions

0 votes
1 answer
0 votes
1 answer
0 votes
1 answer
asked Sep 2, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer

31k questions

32.8k answers

501 comments

693 users

Browse Categories

...