left aligned and right aligned elements on the same line

[inretro]

This may be really simple, but this annoying problem has been baffling me all afternoon :)

I have a div with some text and an image.

I'd like them both to appear on the same line, but with the text aligned left and the image aligned right.

Whatever i try results either in the text and image on the same line but next to each other, or properly aligned, but with the image on the line below (i.e image top = text bottom)

I started with roughly the following:

<div id="container">some text here to be left aligned <div id="imageAlignRight><img></div></div>

Floating the image right gets the correct horizontal position but not level with the text top.

I've tried putting the text and image as separate spans (assuming they would be put inline) but that didn't work either...

Any ideas?

Richard

[benihana]

what CSS are you using?

[jalarie]

How about this:

<div style="position: absolute; width: 100%; background-color: #ffcccc;">
<div style="position: relative; float: left; background-color: #ccffcc;">
This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text.
This is a lot of text. This is a lot of text. This is a lot of text.
</div>
<div style="position: relative; float: right; background-color: #ccccff;">
<img src="zd1_prpl.gif">
</div>
</div>

[inretro]

That's done it!

Thanks a lot :)

Richard