Aligning 'read more' link right - possible in HTML/CSS?

[Adnams Drinker]

I have a paragraph of body copy and want to put a 'read more ...' link at the end after the last word in the paragraph. Easy enough, but if the body copy is ranged left, is there any way that the 'read more' can be made to align to the right hand edge of the containing column?

I know this is easy in print - I guess it would be classed as horizontal justification - but can it be done in HTML with a bit of CSS? I've tried putting the 'read more' in a div and aligning that right but can't get it to sit on the same baseline as the body copy ...

 

[iCraig]

Er, can you provide us with a link or any source material?

 

[punky_munky]

just an idea but -

a.floatright{float: right}

and then in your html: <a class="floatright" href="yourlink.htm">Link</a>

not tested in anyway.

 

[Augmented]

An alternative is to absolutely position the <a> to the bottom and right of its containing paragraph. This requires you to assign a class to the final paragraph (at least without seeing your code):

<p class="last">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. <a href="#">Read More...</a></p>

p.last {
position: relative;}

p.last a {
position: absolute;
bottom: 0;
right: 0;}

Couple of caveats:
The bottom value must be equal to any bottom padding on p.last in order to sit on the paragraph text's baseline.
If the final line of text runs to the end of the line, it will overlap the link text.

 

[Adnams Drinker]

Thanks for the suggestions gents - I'll give 'em a go later ...