Question

Let’s say that I have 2 lines like this.

Some Label: First element
            Second element

The second line is indented so that it aligns with First element.

This can be done easily with table.

<table>
  <tr>
    <td rowspan="2">Some Label:</td>
  </tr>
  <tr>
    <td>First element</td>
    <td>Second element</td>
  </tr>
</table>

But I don’t want to use for alignment.

<div>
  <span>Some Label:</span>
  First element
</div>
<div>
  Second element
</div>

Restriction: The length of Some Label is not known. So I can’t use hard coded width.

Thanks.

Sam

Answer 1

If you change your HTML to something like this:

<div class="row">
    <div class="header">Some Label:</div>
    <div class="labels">
        <div>First element</div>
        <div>Second element</div>
        <div>Third element</div>
    </div>
</div>​

This CSS will work just fine:

.row {
    display: inline-block;
}

.header {
    float: left;
    margin-right: 5px;
}

.labels {
    float: right;
}

Demo: http://jsfiddle.net/Ludww/1/