Two Column or "Double-Justified" Lists

Here's a CSS tutorial to create double-justified lists. This is the most readable way I've found to present a list of dated links in a compact format. I first used this as a method to display a blog archive in a sidebar. Here's the example:

  • 5/4New Yorker
  • 5/6Los Angeles Times
  • 5/30Does it work with extremely long titles? I mean really long titles that will certainly span multiple lines in any case.
  • 6/15This line will be obscured by the line above

Unfortunately, as the last two lines demonstrate, it only works if the item does not need to wrap to multiple lines.

Update: A variant of this technique can be used to right-justify the right column. Check it:

  • 5/4New Yorker
  • 5/6Los Angeles Times
  • 6/15This line will be obscured by the line above

Here's the code:

  • 5/4New Yorker
  • 5/6Los Angeles Times
  • 5/30Does it work with extremely long titles? I mean really long titles that will certainly span multiple lines in any case.
  • 6/15This line will be obscured by the line above
  • 5/4New Yorker
  • 5/6Los Angeles Times
  • 6/15This line will be obscured by the line above

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.

More information about formatting options