Tutorial: Split Ends (Text On Opposite Sides)

Text on Left

Text on Right

This tutorial will show you how to get two pieces of text to sit at opposite ends of a line. This is easy enough to do if you're using tables - use two cells, left-align the left one and right-align the right one (which is what I have done above). But how hard is it to do if you don't want to have all that table markup just to achieve this simple task?

Not hard at all. There are other ways you could to this, but I'm going to use two spans within a paragraph. (A span applies styles inside a single line.)

Let's say you want to left-align this text: Exciting and New! and you want to right-align this text: Better than Ever!

We will apply the bold text to our CSS, which will cut down on our HTML. Here's our CSS:

And in our HTML:

<p><span class="lft">Exciting and New!</span><span class="rt">Better than Ever!</span></p><br><br>

That's considerably less HTML code than a two-column table, isn't it? Check out the results here.

Since we used classes rather than IDs, you can apply these styles as many times as you need them on your page.

(Note the br tags at the end of the line in the HTML - this is important, or the next line can drift upwards between your "split ends." This is corrected with one br, so why do we have two? This is to deal with a glitch in Internet Explorer, which leaves a partial line of the text below centered if the text is resized. If you want to see this problem in action, view our problem demo in Internet Explorer and resize the text. [View > Text Size > Larger or Largest])

One more thing: depending on the width of your container and how long your floated text is, if the user resizes the text dramatically, eventually the right float is going to drop to a second line - there is, after all, only so much room in our container (I gave this div a rather narrow width). The present example holds together at least up to 150%. After that, you may notice that when the right float shifts to the next line, in some browsers the unfloated text below may sit next to it. If you find this happening, and you want to ensure that your text below always stays below, even with dramatic resizing, you can accomplish this with the clear:both; CSS property (applied to the unfloated text). To do this, your first paragraph below your "split ends" should have the CSS in the tag:

<p style="clear:both">This is your paragraph.</p>

Now your paragraph will stay underneath the split ends, no matter how large the text is resized.

Here's the result. Resize your text as large as you wish, and see what happens.

 

« Return to tutorials main index.