Grow your CSS skills. Land your dream job.

Left- and right-align text on the same line, without tables

  • # June 18, 2008 at 2:54 pm

    Many times when designing a site, I’ve run into a situation where I want text to be both left-aligned and right-aligned in one line, like so:

    Code:
    Today 6/18/08
    ——————————————-

    While it’s quite easy to do with tables – just make two cells, and align the text in the right cell to the right – I was never quite able to figure out how to do it with just CSS, until recently.

    Here’s my solution:

    - Create a containing div
    - Inside the containing div, put each piece of text in its own div
    - For the left div, specify "float: left;"
    - For the right div, specify "text-align: right;" and do NOT float it

    Here’s an example (copy and paste into a new document to see for yourself). You can also see this technique in use on my portfolio site.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Lorem Ipsum Dolor

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed scelerisque, turpis sed aliquet facilisis, tellus magna iaculis justo, non sollicitudin elit risus sed est. Morbi congue. Nam ipsum nisi, elementum in, convallis fermentum, sollicitudin et, nisi. Sed mollis eleifend eros. Quisque at leo sed quam commodo blandit.

    Sit Amet, Consectetuer

    Proin tellus. Ut sem elit, suscipit sit amet, laoreet sed, faucibus at, risus. Ut id neque tempus orci elementum pharetra. Duis sapien. Ut lectus mi, dignissim eget, viverra id, ultrices sed, nisl. Maecenas placerat tortor a lacus. Nulla facilisi. Aenean a est nec metus elementum accumsan. Sed nunc nisi, aliquam vel, placerat id, sagittis eu, pede.

    Adipiscing Elit

    Ut id neque tempus orci elementum pharetra. Duis sapien. Ut lectus mi, dignissim eget, viverra id, ultrices sed, nisl. Maecenas placerat tortor a lacus. Nulla facilisi. Aenean a est nec metus elementum accumsan. Sed nunc nisi, aliquam vel, placerat id, sagittis eu, pede.


    Is this the "correct" way to do this? It works in Firefox 2/3, Safari 2/3, and IE 6/7, so it seems pretty bulletproof. But I’d love to hear suggestions or other ideas about how to do this.

    # June 18, 2008 at 4:49 pm

    This was a while ago, but this is how I handled it:

    http://css-tricks.com/left-align-and-ri … same-line/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".