CODEWITHSUNDEEP
htmlcsssemantic-markup
Sarabjot
Sarabjot

Reputation: 509

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 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.

Upvotes: 1

Views: 1519

Answers (3)

thirtydot
thirtydot

Reputation: 228282

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:

Upvotes: 4

Tony
Tony

Reputation: 684

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>

Upvotes: 0

mylesagray
mylesagray

Reputation: 8869

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

Upvotes: 3

Related Questions