CSS-Tricks PSD to HTML

Left Align 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. 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

[LIVE EXAMPLE]


Responses


  1. 1

    Gravatar

    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.


    Comment by PL Miller — February 20, 2008 @ 10:14 am

  2. 2

    Gravatar

    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)


    Comment by Digit-8 — September 16, 2008 @ 5:58 am


Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

Live Comment Preview


Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.