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

[daGUY]

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:

Lorem Ipsum Dolor

Back to top

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

Back to top

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

Back to top

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.

[Author]

Posts