Question

I have one div that should contain text and bellow it one image.
I don’t want that image to ever go out of that div. Just to the bottom.
That image maximum should be 128px.
But when text on top of the div is too large image should become smaller.
I have tried something but this stick image to the bottom of the browser:

<div style="width:250px; height:300px;background:#ff0000;">
    <div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/></div>
    <img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: absolute;
                                                                                                 bottom: 0;
                                                                                                 set left: 0;
                                                                                                 height: 24px;"/>
  </div>

Update

<div style="width:250px; height:300px;background:#ff0000;">
    <div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>
hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>
    <img src="http://www.blogcdn.com/www.joystiq.com/media/2008/07/ea.logo.round.490.jpg" style="position: relative;bottom: 0;left: 0; height:100%;"/>
  </div>

Update
http://jsfiddle.net/jjehN/

Answer 1

UPDATE:
For your needs use “float” instead. Remember to use the “clear” after floats so you dont break the page. Heres your code, working with textwrapping

<div style="position:relative;width:250px; min-height:300px;background:#ff0000;">
    <div style="background:#00ff00;">hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hello<br/>hjg<br/>jhg</div>

            <img src="http://tools.android.com/_/rsrc/1306369561351/recent/miscellaneousimprovements-1/android_icon_128.png"style="float:bottom;
                      bottom: 0;left: 0; background:#0000ff;max-height: 100%;"/>
    <div style="clear:both;"></div>
  </div>

For making the picture shrink/grow. Use Javascript. Maybe jQuery will be easiest for you. Make a new tread here at Stackoverflow if you find any troubles using it.

Best Regards
Jonas