05 Oct 2007 Left and Right align text on the same line
Posted by Hans-Henry Jakobsen
It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line, eg in a footer.
Here is how this can be done in HTML:
<div id="footer"> <p class="leftalign">Text on the left.</p> <p class="rightalign">Text on the right.</p> </div>
If you were to then give your CSS classes leftalign and rightalign values of text-align: left; and text-align: right; respectively, you would get close to your desired result, but your right-aligned text would be bumped down one line because of the new paragraph. Instead, just float your paragraphs:
.leftalign {
float: left;
}
.rightalign {
float: right;
}
Then just remember to clear your float:
<div style="clear: both;"></div>
