CODEWITHSUNDEEP
css
1110
1110

Reputation: 6829

Stick image to the div bottom

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/

Upvotes: 1

Views: 11078

Answers (2)

Jonas m
Jonas m

Reputation: 2734

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

Upvotes: 5

Jannis M
Jannis M

Reputation: 745

Try this:

<div style="width:250px; height:300px;background:#ff0000;position: relative;">
  <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: absolute;bottom: 0;left: 0; height:100%;"/>
</div>

Upvotes: -1

Related Questions