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

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:

Answer 2

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>

Answer 3

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 :)