page 1 of 6
CSS Right Justify
Introduction
The situation: Your page design requires that some element in a left-justified line of text be aligned to the right. For example the page number in the main heading above or the graphic elements in the example heading and paragraph below. These can be links to the page top, a graphic to indicate the end of a content item, or a link at the end of a teaser to the rest of an article.
The up arrow in this heading goes no where?!
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 pul vinar, tell us ligula tincidunt nisl,
sed dictum lectus sem id nisl. Nunc quis nisl. Vivamus id orci sit amet lacus aliquam pul vinar.
Aliquam cursus scelerisque sapien. Don ec et al eleifend felis. In hac habitasse platea dictumst.
Three methods to accomplish this are presented.
- Using a Right Float
- JavaScript Positioning.
- CSS Positioning.
The focus of this how-to is positioning the end of line or end of paragraph element with CSS positioned elements. However, floated elements get a page, and there is a page showing the use of JavaScript for the sake of completeness and to introduce the calculations that will help with Microsoft's Internet Explorer. The techniques used and their principles can be applied in other effects.
