baseline align image and text

[galmok]

I am trying to align some text with an image.

image
image
image Here is
image some text

The 4 image lines all refer to the same image.

The text is contained in a div with a forced width (which will break the text in 1 or more lines). The text is to be aligned so the baseline of the last line matches the bottom line of the image.

I have a page showing some attempts:

http://www.miba.auc.dk/~bme/vchi/test.html

The right-most attempt (gray background) looks as I want it (in IE6 and IE7) but firefox aligns the text according to the first line and pushes additional lines down below the image (IE6 and IE7 pushes the first line up and makes the last line fit the bottom line of the image).

My bottom-most attempt is the solution that looks most alike in all browsers, but is not aligned according to baseline.

Is there any way to have this working in firefox as well as IE6/IE7 (and more)?

[galmok]

I gave up and settled for this solution. It works in all browsers but the baseline isn't aligned with the bottom of the text. I guess it is impossible to do. :-/

<style>
#topleft {
	position: absolute;
	top: 10px; /* image: 228 x 162 */
	left: 10px;
	width: 950px; 
}
#headline {
	position: absolute;
	left: 290px; 
	bottom: 0px;
	width: 670; 
	font-size: 26pt;
	font-weight: bold;
	color: #000000;
}
</style>
<div id="topleft">
<img src="someimage.jpg"><div id="headline">Some<br>headline</div>
</div>