Left Align and Right Align Text on the Same Line

by: Chris Coyier

Aug 8 2007
6

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. For example, in a footer, where you might want to have copyright info on the left and webmaster info on the right. Here is how you might want your HTML:

<div id="textbox">
  <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>

If you were to then give your CSS classes alignleft and alignright 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:

.alignleft {
	float: left;
}
.alignright {
	float: right;
}

Then just remember to clear your float:

<div style="clear: both;"></div>

leftandright.png

View Demo

Subscribe to The Thread

  1. PL Miller

    Can you place the code for “text on the left, then text on the right” in an existing table? If so, where is the code placed in the table. I need to get numerous rows to do this very thing. Thanks.

  2. Digit-8

    It is not clear what to do. what to edit.
    More examples should be good or more info here.(about aligning abjects and css files which are necessery to edit)

  3. Gavatron

    I know I’m late to the party here but this worked a treat, exactly the tip I was looking for! Thanks heaps! :)

  4. Mihai

    Here’s a simplified method:

    <div>
    <p style=”float: left”>Text on the left.</p>
    <p style=”float: right”>Text on the right.</p>
    </div>

    Regards,
    Mihai

This comment thread is closed. If you have important information to share, you can always contact me.