html - Scaling an image with a div, whose child sets the height

Question

A div, by itself, is the height of it's contents.

I want a div to include two children: another div (or image that is left aligned) and an unordered list (ul). The inner div (or image) will match the height of the parent div, the parent div height will conform to the height of the list (which can contain any reasonable number of items).

I am unsure how to set the height of the parent div to match that of the list and have the inner div match the height of the outer div. Done properly through CSS.

Alternate solutions are happily accepted, this is just one way I am attempting to address my design goals.

Answer 1

Live Demo

• Tested in IE7/IE8, and recent versions of: Firefox, Chrome, Safari, Opera.
• The height of the image is purely dependent on the height of the ul.
• To feed IE7 the required extra rule height: 100%, I'm using the Star hack. You could use conditional comments, or the Star plus hack instead if you need 100% valid CSS.

CSS:

#iContainer {
    background: #ccc;
    overflow: hidden;
    position: relative
}
#iContainer div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    *height: 100% /* just for you, IE7 */
}
#iContainer img {
    height: 100%
}
#iContainer ul {
    float: right
}

HTML:

<div id="iContainer">

    <div><img src="https://dummyimage.com/500x700/f0f/fff" /></div>

    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
        <li>list 5</li>
        <li>list 6</li>
        <li>list 7</li>
        <li>list 8</li>
    </ul>

</div>

The Big Pink Image: