Align image at bottom right of div - text to flow around

Not that I don't believe you, but I'll increase the points, and see if anyone can come up with something that can achieve something similar. I don't mind nested divs, etc. if that's what I need. Nor do I mind making the image the background of the div. Both the image and the div are fixed width, but with all that text, I can't control the height of the div, obviously.

I have played around with putting the image in a relative div of height 250px, with a top of -250px. However, the container div expands unnecessarily (in IE6, at least), and the text still won't flow around it.

I know where you're coming from, I was simply tring to save you the grief :-)

The problem - in a nutshell - is that in your example you require the text to "float" on the left of the image, but also have the bottom of the image align with the bottom of the container, and there's simply no way to make that happen. Even for 25,000 points :-)

Thanks flow79 (and I forgot to say thanks to seanpowell).

However, it's important to me that the design works whatever the font-size specified in the users' browser, so there's no way I can know where in the text to put the image tag (which is the problem). I need something that is fluid. So, to modify your example by using a large image:

<div style="width: 300px; border: 1px #000000 solid;">
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
<img src="" align="right" alt="" height="200">
Hello World! Hello World! Hello World! Hello World! Hello World!
</div>

The text no longer goes to the bottom of the container div.

>>but it works.
If you're setting up the page for print only perhaps...

I know where you're coming from, but placing an image at the "precise" point in the text, and allowing for the fact that different monitors, browsers, and default text settings are being used, I would have to say that actually it doesn't work at all :-)

the only way to make it sit right at the bottom is to control where you put it in your text - if you have more or less, you have to place the image inside it differently.  Like I said - not a great solution - but it will work if you take the time to plan it properly - believe me - i wish there was a better way, but i cant think of one.

We both posted at the same time Mark :-)

I'm glad you're seeing the inherent problem we're facing...

>>the only way to make it sit right at the bottom is to control where you put it in your text

That's completely wrong. You don't have control over that whatsoever. Sorry...

i understand the issue that different resolutions and font sizes on a monitor may screw it up, but all things being even - my solution does work.  

depending on the amount of text in the div, you must place the proper amount after it.

my first example:
<div style="width: 300px; border: 1px #000000 solid;">
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
<img src="" align="right" alt="">
Hello World! Hello World! Hello World! Hello World! Hello World!
</div>

has 5 lines of text.

A new one (with much more text and a different size image) can also make the text align along the bottom - depending on where you put it in the text.

<div style="width: 300px; border: 1px #000000 solid;">
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
<img src="" align="right" alt="" height="200">
Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
</div>

As i have stated over and over throughout this thread - this is NOT a good way to do this.  I WISH there was a better CSS manner to do so.  But there isnt, so I am offering a possible solution that MAY help out.  There is no reason to be so negative about something that does work if you position it properly.  I dont know why the putdowns and such are necessary - we are all here to HELP!

flow - you're completely missing the point. I am not being negative and I am certainly not putting you down.
Your solution does not work in a dynamic sitation. It's that simple.

But <div style="font-size:150%;width: 300px; border: 1px #000000 solid;"> doesn't work. (Simulating somone who has Text-Size=Large in their browser)

I appreciate your help, and understand your point. It's just that I'd prefer to redesign the page than to have a static solution.

Well, i understand your issues with my solution - with things of this nature, it is difficult to make things work for dynamic content when there is no real solution.  I was just posting to try to be helpful and maybe spark some inspiration for others.  I will unsubscribe from this thread now, because I'm obviously not helping the situation.

OK, it looks like no-one's been inspired. I'm gonna close the question and stick to top alignment.

Hmm.. Not sure why e-e came up with accepted answer and assisted answer in that order. I intended it to be the other way around - 200 points for seanpowell and 50 points for flow79. Apologies if I got them the wrong way round.

A B grade because it's clearly our fault the browsers don't do what you need them to.

It has nothing to do with inspiration. The simple answer to this long winded thread is the same now as it was then http:#11812275

you did only assign me 50 (i got a total of 150 points = 50 x 3 (for the B)).  You accepted my answer, but gave sean more points.  just like you wanted.  

"B: The Expert(s) provided an acceptable solution, or a link to an acceptable solution, that you were able to use, although you may have needed a bit more information to complete the task."

That seems a reasonable description of a "sorry, you can't do it" reply. I'm not blaming you if CSS can't do what I want it to do, but a B seems reasonable. Sorry if you think otherwise.

http://www.experts-exchange.com/Web/Web_Languages/CSS/help.jsp#hi54

see that about the "you cant do that" response.  In EE, that is seen (if valid) as a good answer, and as such deserves an A