We can use absolute positioning to achieve our goal. An absolutely positioned element is positioned by specifying the distance from the inside edge of its closest containing positioned element. When no parent element is positioned relative or absolute, The containing element is usually the document.

When a parent element's CSS position attribute value is absolute or relative, it becomes the positioning context for elements it contains. That is, the point from where the absolutely positionied child's offset is measured. This was utilized in the previous example. It doesn't matter if it is a block or an inline element.

Relatively positioned elements are rendered in their static (regular or normal) position unless an offset is given (left, right, top, or bottom value). By positioning an element relative and giving it no offset values it displays in the normal position and is the reference for absolute positioned children and the offset reference for other child elements (i.e. the point from which offsetLeft, offsetTop, etc. are measured) simplifying calculations.

Horizontal positioning

So, to achieve the goal with DOM Compliant browsers make the parent position relative and the child position absolute with a right attribute value of 0. The child will sit on the right edge of the parent. That takes care of the horizontal position.

IE and a few other browsers deviate from this either by design or because of a flawed implementation. The right and bottom values are measured to the document right and bottom edges not the positioned parent. See Handling IE for instruction on how to position from the left in IE.

The P tag has special considerations. Block elements are not allowed within the P tag. Consequently, you can only use inline tags. Using block elements or inline tags with display: block inside of P tags produces unpredictable results. Also, many browsers do not use floated paragraphs as the right and bottom positioning context.

What about the vertical position?

An overlooked value for the left, right, top, and bottom attributes is auto (IE requires the non-standard static-position). If the only value for the attributes along one axis is auto, then the element's position on that axis is based on the element's position in the html. Note that absolute positioned elements float, on the Z axis, above the non position content, will overlap content, and take no space in the displayed content so the auto position is the same as the regular content immediately to the left in the html source. This is brought up again in Details and Caveats. Checkout the following code snippets.

    CSS:
    .child-elem{
        position:absolute;
        top: auto;
        top: position-static;
        right: 0;
        font-weight: normal;
    }
    .parent-elem {
        position: relative;
        text-align: left;
        border: 1px dotted #000;
        font-size: 1.3em;
    }
    HTML:
    <h3 class="parent-elem">The code yield's this.
        <span class="child-elem">And I'm right justified</span>
    </h3>

The results of this code is...

The code yield's this. And I'm right justified

This fulfils our objective. But, I did cheat to make it work if you are using IE or Konqueror. IE has a quirk mentioned in the note above that needs to be worked around. The work-a-round is discussed on the next page. There is a note on Konqueror on the last page.