CSS way to tightly right-align images?

[jersie0]

How do I make an image tightly align itself to the right side of, for
example, a paragraph?

Let's say I have this html:

<p>
A very short paragraph.<img style="float: right" src="image.jpg" />
</p>

Unless I play with my margins, or perhaps put the above within a DIV,
the image will float way out at the right margin, instead of tightly
aligning to the end of the line.

Obviously, for longer paragraphs, this wouldn't be an issue, since the
paragraph would go all the way to the right margin.

 

[Toby A Inkster]

How do I make an image tightly align itself to the right side of, for
example, a paragraph?

<p>
A very short paragraph.<img src="image.jpg" alt="blah" />
</p>

 

[steve]

How do I make an image tightly align itself to the right side of,
for

example, a paragraph?

Let's say I have this html:

<p>
A very short paragraph.<img style="float: right" src="image.jpg" />
</p>

Unless I play with my margins, or perhaps put the above within a DIV,
the image will float way out at the right margin, instead of tightly
aligning to the end of the line.

Obviously, for longer paragraphs, this wouldn't be an issue, since the
paragraph would go all the way to the right margin.

Maybe this is what you need to do, I'm not sure

<p>
<img style="float: right" src="image.gif">text text text text text
</p>

 

[jersie0]

How do I make an image tightly align itself to the right side of, for
example, a paragraph?

Let's say I have this html:

<p>
A very short paragraph.<img style="float: right" src="image.jpg" />
</p>

Unless I play with my margins, or perhaps put the above within a DIV,
the image will float way out at the right margin, instead of tightly
aligning to the end of the line.

Obviously, for longer paragraphs, this wouldn't be an issue, since the
paragraph would go all the way to the right margin.

Toby's method works, but there are two things that make it not perfect
for me:

1. The image gets positioned so that its bottom lines up with the
text, rather than its top as I'd like (I realize that some additional
CSS can fix this).

2. The bigger issue is that a "very short" paragraph can mean
different things to different browser window sizes. A paragraph that
wraps in a 640x480 window won't even go halfway across the screen in a
1600x1200 window. So Toby's method would be fine for a paragraph that
I know will never wrap. But it forces me to decide if a paragraph is
"short" (in which case I'd use his method) or will wrap (in which case
I can use the CSS above).

I'd like something simple that handles both of the following cases:

a) For a paragraph that fits into one line in a browser window, the
image is right-aligned immediately after the end of the text, with the
top of the image aligned with the top of the text.

b) For a paragraph that wraps onto subsequent lines, the image is at
the extreme right of the browser window, with its top edge aligned
with the text's top edge. Paragraph text flows up to the image's left
edge. If the paragraph continues below the image bottom, the text
then extends under the image to the right edge of the window.

 

[Sid Ismail]

: Toby's method works, but there are two things that make it not perfect
: for me:
:
: 1. The image gets positioned so that its bottom lines up with the
: text, rather than its top as I'd like (I realize that some additional
: CSS can fix this).


<img src="cow_over_moon.jpg" align=top|middle|baseline ...>

Sid

 

[jersie0]

: Toby's method works, but there are two things that make it not perfect
: for me:
:
: 1. The image gets positioned so that its bottom lines up with the
: text, rather than its top as I'd like (I realize that some additional
: CSS can fix this).


<img src="cow_over_moon.jpg" align=top|middle|baseline ...>

Sid

Here's the nutty thing: The above works (actually, using align="right"
has the same problems that the css method does), but align is
deprecated. I'm hoping for a CSS method that does what I want.

 

[Toby A Inkster]

Here's the nutty thing: The above works (actually, using align="right"
has the same problems that the css method does), but align is
deprecated. I'm hoping for a CSS method that does what I want.

Tried CSS vertical-align?

http://www.w3.org/TR/REC-CSS1#vertical-align