Left and Right align text on the same line

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>