Right Aligned Sprites

There are a few ways to accomplish right aligned sprites next to paragraph text. Note that these do not require that you use a <p> tag - they are techniques for dealing with arbitrarily long text.

Use an extra element

This uses an absolutely positioned element within a relative parent to align sprites right.

This method requires adding an additional element inside of the text container. By setting the container to position:relative; and the additional element to position:absolute;, we have a lot of flexibility with where we place the sprite, and don't have to worry about overflows or offsets, since we can set the width and height directly on the sprite.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Lorem Ipsum...

Use the :after pseudoclass (experimental)

This is an experimental example. It uses the :after pseudo class, and will not work in IE <= 7.

This allows you to use a right aligned sprite, without having to add extra elements to your HTML. Unfortunately, due to browser compatibility, I do not recommend using it (unless if you can ignore IE <= 7.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Lorem Ipsum...