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>

Tags: CSS, html