image aligment to the right - bottom corner of a text

How can I align a floating image on the right-bottom corner of my text? I have a div which has a background colore and contains a text. I want to see an image in that div tag, in the right-bottom corner. Any CSS solution??

<div id="myText"> 
A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here A lot of text here 
<img id ="info_ico" src="images/key_ico.png" />

<div>

#myText
{
  开发者_高级运维      background:#fdf6cc;
    min-height: 90px;
    margin-left:1px;
    width: 913 px;
    padding-left: 30px;
}

#info_ico
{
     float:right; 
     clear:right;
}

Now what to change to see the image in the bottom of the text?

---

If the length of the content is not going to change you can always place the image just before the end of the text, keep it floated right as you're doing and the last bit of text will flow down the left hand side.

Example here: http://jsfiddle.net/pBDaJ/

---

CSS unfortunately does not provide a way to do this.

The only thing you can do is to experimentally change where you insert the img inside your text, until it ends up where you want it to be: http://jsfiddle.net/KQFBb/1/

This is obviously not viable if the content is dynamic, or the dimensions of the container can otherwise change.

In that case, the only option left is to use JavaScript.

---

Using background you should be able to do this.

Add to your myText div styling:

background: url('images/key_ico.png') no-repeat;
background-position: 100% 100%;

This will place the picture in the bottom right corner of the div. Hope this helps :-)

---

You can use the ::before pseudo-element to add a specific amount of height above the floated image. Just float the pseudo-element to the right and give it some height; then float the image to the right, clearing the pseudo-element.

.wrapper::before {
    content: '';
    float: right;
    height: 300px; /* Height of the container minus the height of the image */
}
.wrapper img {
    float: right;
    clear: right;
}

If you don't know the height of the content, some light JavaScript is necessary. See http://jsfiddle.net/3jvJh/ for a working example.