IE 8 Div Disappears when Children that are larger are appended

Question

As the title says here's whats basically going on:

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;white-space:nowrap;'>
  </div>

Upon user interaction - I do some work: request some JSON, build elements, then append said elements to the "container" div. The result is something like:

<div id='container' style='display:block; position:absolute; width:auto; height:533px;overflow:hidden;'>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
   <img src="A REAL, VALID URL" border='0'/>
 </div>

Now here's whats happens. If children are appended to this and they exceed the height of the parent. The parent disappears.

I've pursued "hasLayout" and all that jazz - nothing works.

What does work is if the children are of the same size or smaller - but due to the nature of what I am trying to accomplish, this is not desired - nor can it be guaranteed they will be smaller.

height:auto doesn't work but setting a value larger than the largest child fixes this - but skews my layout

Thanks in advance.

edit: The images are loaded via a combo of JSON and a deferred queue. They are guaranteed to be loaded prior to appending them to container element.

basically :

var img = new Image();
img.onload = function () { theContainer.appendChild(this);};
img.src = someURL;

works fine in all chrome and FF

edit2: I have tried to append the images both to the "container" object before and after it itself is appended to the body. Neither produces the expected result.

edit 3: *IE7 and IE9 are not behaving as described above. This is exclusive to IE 8 *

Answer 1

So the issue was the "hasLayout" IE 8 bug. By setting the width of the container div to "something other than auto" - it is now visible and and working / displaying as intended.

Fun times, thanks all for the assistance.

Answer 2

I've seen this before, but I don't remember exactly how I solved it. You might try putting another div inside of your container and appending your images into that div, wrapper divs often get around IE issues.