<p>I have an absolutely positioned <code>div</code> containing several children, one of which is a relatively positioned <code>div</code>. When I use a <code>percentage-based width</code> on the child <code>div</code>, it collapses to <code>0 width</code> on IE7, but not on Firefox or Safari.</p>
<p>If I use <code>pixel width</code>, it works. If the parent is relatively positioned, the percentage width on the child works.</p>
<ol>
<li>Is there something I'm missing here?</li>
<li>Is there an easy fix for this besides the <code>pixel-based width</code> on the child?</li>
<li>Is there an area of the CSS specification that covers this?</li>
</ol>

[{'answer_id': 31, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 8, 'selected': True, 'text': '<p>The parent <code>div</code> needs to have a defined <code>width</code>, either in pixels or as a percentage. In Internet&nbsp;Explorer&nbsp;7, the parent <code>div</code> needs a defined <code>width</code> for child percentage <code>div</code>s to work correctly.</p>\n'}, {'answer_id': 1948, 'author': 'Matt MacLean', 'author_id': 22, 'author_profile': 'https://Stackoverflow.com/users/22', 'pm_score': 6, 'selected': False, 'text': '<p>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.</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#absdiv {\n  position: absolute; \n  left: 100px; \n  top: 100px; \n  width: 80%; \n  height: 60%; \n  background: #999;\n}\n\n#pctchild {\n  width: 60%; \n  height: 40%; \n  background: #CCC;\n}\n\n#reldiv {\n  position: relative;\n  left: 20px;\n  top: 20px;\n  height: 25px;\n  width: 40%;\n  background: red;\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="absdiv"&gt;\n    &lt;div id="reldiv"&gt;&lt;/div&gt;\n    &lt;div id="pctchild"&gt;&lt;/div&gt;\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 43377, 'author': 'Evil Andy', 'author_id': 4431, 'author_profile': 'https://Stackoverflow.com/users/4431', 'pm_score': 5, 'selected': False, 'text': '<p>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 <code>div</code> 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 <code>div</code> its parent has a width of 0 hence why it itself collapses to 0.</p>\n\n<p>If you would like a more in-depth discussion of this along with lots of working examples, have a gander <a href="http://www.positioniseverything.net/explorer/percentages.html" rel="noreferrer">here</a>.</p>\n'}, {'answer_id': 856615, 'author': 'lock', 'author_id': 24744, 'author_profile': 'https://Stackoverflow.com/users/24744', 'pm_score': 5, 'selected': False, 'text': "<blockquote>\n<p>Why doesn’t the percentage width child\nin absolutely positioned parent work\nin IE7?</p>\n</blockquote>\n<p>Because it's Internet Explorer.</p>\n<blockquote>\n<p>Is there something I'm missing here?</p>\n</blockquote>\n<p>That is, to raise your co-workers' / clients' awareness that IE is not good.</p>\n<blockquote>\n<p>Is there an easy fix besides the pixel-based width on the child?</p>\n</blockquote>\n<p>Use <code>em</code> 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.</p>\n<blockquote>\n<p>Is there an area of the CSS specification that covers this?</p>\n</blockquote>\n<p>None, as far as I remember <code>em</code>'s and %'s were intended for font sizes alone back at CSS 1.0.</p>\n"}, {'answer_id': 3998843, 'author': 'Mike', 'author_id': 484413, 'author_profile': 'https://Stackoverflow.com/users/484413', 'pm_score': 5, 'selected': False, 'text': '<p>I think this has something to do with the way the <code>hasLayout</code> property is implemented in the older browser.</p>\n\n<p>Have you tried your code in IE8 to see if works in there, too?\nIE8 has a Debugger (<kbd>F12</kbd>) and can also run in IE7 mode.</p>\n'}, {'answer_id': 52225050, 'author': 'Mohamed El Mrabet', 'author_id': 1314885, 'author_profile': 'https://Stackoverflow.com/users/1314885', 'pm_score': 3, 'selected': False, 'text': '<p>The <code>div</code> needs to have a defined width:</p>\n\n<pre><code>&lt;div id="parent" style="width:230px;"&gt;\n    &lt;div id="child1"&gt;&lt;/div&gt;\n    &lt;div id="child2"&gt;&lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 64219066, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 3, 'selected': False, 'text': "<p>The parent <code>&lt;div&gt;</code> tag doesn't have any width specified. Use it for the child <code>&lt;div&gt;</code> tags, it could be percentage or pixel, but whatever it would be,it should link to its appropriate positions:</p>\n<pre><code>&lt;div id=&quot;MainDiv&quot; style=&quot;width:60%;&quot;&gt;\n    &lt;div id=&quot;Div1&quot;&gt;\n        ...\n    &lt;/div&gt;\n    &lt;div id=&quot;Div2&quot;&gt;\n        ...\n    &lt;/div&gt;\n    ...\n&lt;/div&gt;\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/6', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/9/']