html - Why did the width collapse in the percentage width child element in an absolutely positioned parent on Internet Explorer 7? -

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

html css internet-explorer-7

ShareShare a link to this question Copy linkCC BY-SA 4.0

Improve this question

Follow
Follow this question to receive notifications

edited Jan 29 at 18:46

Letsintegreat

2,79044 gold badges1616 silver badges3636 bronze badges

asked Jul 31 '08 at 22:08

Kevin DenteKevin Dente

23.9k77 gold badges4141 silver badges4747 bronze badges"

Asked by: Guest | Views: 347

Total answers/comments: 4

Comments display order:

bert [Entry]

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 divs to work correctly.

bert [Entry]

"Here is a sample code. I think this is what you are looking for. The following code 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>
Run code snippetHide resultsExpand snippet"

bert [Entry]

"IE prior to 8 has a temporal aspect to its box model that most notably creates a problem with percentage-based widths. In your case here an absolutely positioned div by default has no width. Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point, IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.

If you would like a more in-depth discussion of this along with lots of working examples, have a gander here."

bert [Entry]

"Why doesn’t the percentage width child
in absolutely positioned parent work
in IE7?

Because it's Internet Explorer.

Is there something I'm missing here?

That is, to raise your co-workers' / clients' awareness that IE is not good.

Is there an easy fix besides the pixel-based width on the child?

Use em units as they are more useful when creating liquid layouts as you can use them for padding and margins as well as font sizes. So your white space grows and shrinks proportionally to your text if it is resized (which is really what you need). I don't think percentages give a finer control than ems; there's nothing to stop you specifying in hundredths of ems (0.01 em) and the browser will interpret as it sees fit.

Is there an area of the CSS specification that covers this?

None, as far as I remember em's and %'s were intended for font sizes alone back at CSS 1.0."