IE6 Два Div внутри оболочки div, один div отказывается изменять ширину при изменении содержимого

Question

У меня есть два div, завернутые в другой div. Один из div - это заголовок, другой будет содержать изображение. Я хочу, чтобы содержимое div оборачивалось с правильным соотношением сторон изображения.

Обёртка div имеет минимальную ширину и указанную высоту. Изображение может иметь произвольную ширину. Высота содержимого div должна корректироваться в зависимости от высоты изображения.

Он отлично работает в FF, но в IE6 ширина заголовка не изменяется при изменении div-оболочки для размещения указанной ширины изображения.

Вот скрипка. скрипка

Вот изображение проблемы: Изображение

Answer 1

В IE6 элемент заголовка будет занимать объем пространства, определенный его элементом-контейнером. В этом случае #testWrapper, который установлен в 100px. IE6 не очень хорошо будет играть с абсолютно позиционированными элементами или с плавающей запятой с шириной, установленной на auto. Я бы посоветовал определить ширину, которую вы хотите, в #testWrapper и установить img на 100%, если это возможно.

    #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%;
    }