We want to use CSS to right justify a typographic element, maybe a graphic at the end of a paragraph. Using the float attribute is the most obvious method. Just add the style rule float: right for the element.

That can work fine for headings or other single line blocks, like the next link at the bottom of this page, where the float can be coded before the left justified element, but paragraphs are a bit tricky. Floated elements need to be coded before the content that will be next to them. That implies the float needs to be coded at the end of the second to last line. This position is not known because of the way text is repositioned on different systems. So your only choice is to put the float at the end of the paragraph—the browser will put the float below the last line (Konqueror did not, so other KHTML based browsers may not)—and then move it up the height of a line.

To position the floated element next to the line above it instead of below the line where it normally would be, add a style rule with negative 1 em top margin for the floated element. This will pull it up about a line. Use a larger or smaller value if needed.

Take a look at these snippets of sample code.

    CSS:
    .right-justify {
        float: right;
        margin-top: -1em;
    }

JavaScript (a hack for Konqueror):

    if (browser.isKonqueror) { // See Browser Sniffing
        var s = '<style type="text/css">.right-justify {margin-top: 0;}<\/style>'
        document.write(s);
    }

    HTML:
    <p>Lorem ipsum dolor sit amet, consectetuer...tellus &nbsp;&nbsp;&nbsp;
        <img class="right-justify">src="eyes.gif" width="24" height="13" border="0" />
    </p>

And the code results in ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris metus. Sed vitae quam. Morbi risus mi, laoreet ut, consequat ac, rutrum vel, mi. Praesent ultrices nonummy quam. Mauris iaculis. Maecenas posuere, purus nec tincidunt pulvinar, tellus ligula tincidunt nisl, sed dictum lectus sem id nisl. Nunc quis nisl. Vivamus id orci sit amet lacus aliquam pulvinar. Aliquam cursus scelerisque sapien. Donec eleifend felis. In hac habitasse platea dictumst. Proin venenatis vulputate tellus.          Eyes icon

There needs to be a regular space and then a sufficient number &nbsp; entities to ensure that there is enough blank space at the end of the line for the float. Otherwise, it can overlap the last characters. If the float won't fit, the &nbsp; will wrap and move it to a new line.

The image's top margin is -1em pulling it up the width of the letter "M". This is approximately the height of a line and will automatically adjust to font size changes. However, different font faces and rendering systems may require more than 1 em especially serif fonts.

See comments about IE and floated links in Cross-Browser Issues. It is best to put images and links inside floated spans.

This is good, but there are some additional technques to position an element within its parent that can be added to our Web programming tool belt.