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

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


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>

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>

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>

Tags:

Css

Recent Posts