page 3 of 6 CSS Right Justify

This section is included for completeness, to provide an alternative that may be useful, and to provide a foundation for code shown in a later section dealing with MS IE. We'll write some JavaScript code that runs after the page has loaded repositioning the elements on the page.

There are many ways to calculate the required page coordinates to position an element against the right side of a parent element. This method makes the parent element a positioned element by giving it the style rule position: relative; Thus, making it the positioning context for the element that will be positioned on the right. In fact, the CSS methods in the next section also use this technique. Doing this simplifies the calculation by making the child's parentNode the point from which the child's offsetLeft is measured.

In order to be moveable, the child element's position attribute is set to relative. It could also be set to absolute—and many examples do, but then the position calculation is changed.

The math is conceptually basic. We need to determine the inside width of the parent element, the outside width of the element to be moved, and how far to the right from the parent element's left side it's currently positioned. With this information, how much farther the child element has to be moved can be calculated. Simply subtract the width and current position of the child element from the width of the parent and the result is how much farther the child element needs to be moved. These numbers are easy to obtain.

The parent element's inside width is its clientWidth, the child element's outside width is its offsetWidth. And, by having made the parent element the positioning context (by setting the parent's position attribute to relative), the child's offsetLeft is its the current distance from the inside edge of the parent element and not some other measurement (there are exceptions that are handled in the code, in which case we need the difference of the child's and parefsetLeft from a common point).

The following snippets of code will help to make things clear.

                CSS:
                .adjust-me {
                    position: relative;
                }
                .adjust-me img {
                    vertical-align: text-top;
                }

Both the parent element, P with class adjust-me in this example, and the child, a SPAN also with class adjust-me, are positioned relative by virtue of having class adjust-me. The descendant IMG of class adjust-me has a vertical-align value of top, because the height of the image in this example is greater than a line. This let's it hang down from the line rather than creating a space between the last line and the previous line.

    JavaScript:
    /* Get page elements to be right justified and call move_it */
    function rJust (tag) {
        var tagList = document.getElementsByTagName(tag);
        for (var i = 0; i < tagList.length; i++) {
            if (tagList[i].className == "adjust-me") {
                move_it(tagList[i]);
            }
        }
    }//eof
    /* Calculate the adjustment and move an element to the right*/
    function move_it (el) {
        var cWidth = 0;
        var nAdjust = 0;
        /* Determine inside parent width */
        if (elem.parentNode.clientWidth) {
            cWidth = elem.parentNode.clientWidth;
        }
        else {
            /* fix for IE 5.0 because it doen't return a value for clientWidth*/
            cWidth = elem.parentNode.scrollWidth;
        }
        /* Calculate amount to move child */
        if (elem.parentNode == elem.offsetParent
                       || elem.parentNode.tagName == "LI") {
            nAdjust =  cWidth - elem.offsetWidth - elem.offsetLeft + 'px';
        }
        else {
            /* Fix for IE 5.0 */
            nAdjust = cWidth -
                    (elem.offsetLeft - elem.parentNode.offsetLeft)
                     - elem.offsetWidth +'px';
        }
        elem.style.left = nAdjust;
    }//eof
    
    window.onload = runit;

The code is written to be generic and reposition as many objects as the page requires.

• Function rJust creates a list of elements with the passed tag name: in this case, span. It steps through the list passing those with class adjust-me to the move_it function.
• Function move_it does the work. If the parent element's clientWidth exists and is not zero, that is the inside width of the parent. Otherwise, the scrollWidth is used primarily to accommodate IE 5.0.
• Next it is confirmed that the parent is indeed the positioning context for the child element and the calculation is done as previously described. A quirk in IE causes the test to fail erroneously when the parent is a list item (LI) so all parent list items are accepted.
• If the parent is not the positioning context (usually an IE 5.0 problem), then we do the calculation based on their common positioning context.
• Finally, the element is moved by assignment to the left style attribute.

        HTML:
        <p class="adjust-me">Praesent ultrices ...
            <span class="adjust-me">
                <a href="#top" title="Page Top">
                    <img src="up-arrow.gif" alt="Up" border="0" />
                </a>
            </span>
        </p>

And here is the results. Note: because of the image height, vertical alignment was specified.

Praesent ultrices ... 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.

This approach works and is compatible with most browsers. It requires Javascript calculations and runtime positioning after the page loads. The goal, however, is to accomplish this with a CSS style that is cross browser compatible. So on to the next method.