How to align about the colon in each line of text like movie credits often do

Question

I would like to align a few line of text about the colon in each line. So I have this:

aaa:111
bbbbbbb:22222
cccccccccc:33333333
dd:44
eeee:5555

I want them to align about the colon:

       aaa:111
   bbbbbbb:22222
cccccccccc:33333333
        dd:44
      eeee:5555

So far I can manage it with a table and two columns, the left column text-align:right, and the right column text-align left. But I am so sure that there are much more elegant solutions than this. -- Any ideas?

Thanks!

Answer 1

An easy and semantic way would be to use a definition list:

Demo

* {
  margin: 0;
  padding: 0;
}

dt {
  display: block;
  float: left;
  width: 100px;
  text-align: right;
}

dt:after {
  content: ':';
}

dd {
  display: block;
}

<dl>
  <dt>aaa</dt>
  <dd>111</dd>
  <dt>bbbbbbb</dt>
  <dd>22222</dd>
  <dt>cccccccccc</dt>
  <dd>33333333</dd>
  <dt>dd</dt>
  <dd>44</dd>
  <dt>eeee</dt>
  <dd>5555555</dd>

</dl>

Answer 2

You have to make sure that whatever wraps those two classes has enough room here - 300px + any padding or margin.

.label-wrap {
  width: 150px;
  text-align: right;
  float: left;
}

.info {
  width: 150px;
  float: left;
  text-align: left;
}

<div class="label-wrap">aaa:</div>
<div class="info">111</div>

Answer 3

If your data is tabular data, then your approach with using tables is an acceptable one.

However an alternative would be to use HTML spans:

See fiddle: http://jsfiddle.net/F2PRN/1/

span {
  width: 100px;
  clear: left;
  float: left;
  text-align: right;
  padding-right: 2px;
}

<p>
  <span>aaa:</span>111
</p>
<p>
  <span>bbbbbbb:</span>22222
</p>
<p>
  <span>cccccccccc:</span>33333333
</p>

Answer 4

with arbitrary value length, a table would be the only way to do it