Percentage width child element in absolutely positioned parent on Internet Explorer 7

html css internet-explorer-7
Kevin Dente picture Kevin Dente · Aug 1, 2008 · Viewed 20.4k times · Source

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.

  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?

Answer

maclema picture maclema · Aug 1, 2008

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.

Related questions

:after and :before css pseudo elements hack for IE 7

I am using :after and :before css pseudo elements and it is working fine in IE8, and all modern browsers but it is not working fine in IE7. Are there known hacks to work around this in IE7?

Read More
Image and text inside of <a> tag

This is the html asp.net generated (with some client-identifying details removed) In Windows XP / IE 7 clicking on the image does nothing. Click on the text executes the hyperlink. Right-clicking anywhere and then selecting open in new window or open …

Read More
Hide scrollbar in IE

In our application for UI we are using JSF or Prime faces for that. We would like to hide the scrollbar for our application, but we are struggling to achieve this in Internet Explorer (We are using IE7). Is there …

Read More