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

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 th开发者_如何学JAVAe 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.

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://www.devze.com/res/2023/02-15/14/6139c1e6a9ba17d6dec72c258230ffc8.jpg" /></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:

Does this do what you are after?

http://jsfiddle.net/Mutant_Tractor/CQG8s/

It uses a small (pure JS) script to measure the list height on page load then dynamically set the div's height via the .style.height method :)

If you want a div to match the height of its container, set its height to 100%. If you want a div to use up as much space as available, set its height to auto (default).

So, it sounds like the layout you're looking for is

<style type="text/css">
 .scaledimage{height:100%;float:left}
 .list{float:left;}
</style>
<div class="container">
  <div class="scaledimage"></div>
  <div class="list"></div>
<div>