IE6 Two Div's inside a wrapper div, one div refuses to change width when the contents change

I have two divs wrapped by another div. One of the div's is a header, the other will contain an image. I want the content div to wrap the with the correct aspect ratio of the image.

开发者_如何学Go

The wrapper div has minimum widths and heights specified. The image can have an arbitrary width specified. The height of the content div should adjust depending on the image height.

It works fine in FF, but in IE6 the header width does not change when the wrapper div changes to accommodate the specified image width.

Here's a fiddle. fiddle

Here's a picture of the problem: Image

---

In IE6, the header element is going to take up the amount of space defined by it's container element. In this case #testWrapper, which is set to 100px. IE6 won't play very nicely with absolutely positioned elements or floats with widths set to auto. I'd suggest defining the width that you want in #testWrapper and setting the img to 100%, if possible.

    #testWrapper{
        position:absolute;
        bottom: 0; 
        left: 0; 
        margin: 5px;
        border: 1px solid black;
        width:150px; 
    }

    #testHeader {
        background: blue;
        height: 10px;
    }

    #testContent {
        background: black;
    }

    #testimage {
        display: block;
        width: 100%;
    }