Place 'floating' Contents At The Bottom Right Of A Paragraph Of Text

Here is the code: http://jsfiddle.net/ym2GQ/ I want the floating $$ to be within the paragraph before it. It should align with the lasts line in the paragraph but it should be flo

Solution 1:

Given your new information that you want it at the bottom right of the paragraph, see this live example: http://jsfiddle.net/AGEus/1/

In short:

1. Make the <div> a <span> and place it as a child of the paragraph.
2. Make the paragraph position:relative (so that it establishes its own coordinate system)
3. Put some padding in the paragraph on the right side so that the contents of .end won't overlap the text.
4. Absolutely position and size the .end to the bottom right of the paragraph.

HTML:

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  <spanclass="end">$$</span></p>

CSS:

p      { position:relative; padding-right:2em }
p.end { position:absolute; right:0; bottom:0; width:2em }
​

Solution 2:

Replacing the DIV with a SPAN, and moving the inside the P seems to work. You can optionally set the SPAN to inline-block depending on the contents.

If you put the SPAN before the text, it will be near the top. If you put it after, it will be at the bottom.

demo

Solution 3:

Ok, played with your code and found the solution. You need to set the p tag to display: inline and float the div to the right. I updated your fiddle for you.

Solution 4:

If I understand you right, you want that the div is displayed over your paragraph. For that you could just set the div to position absolute and set the exact position with top, left, right, bottom.