Question

Here’s some CSS and HTML to make a textarea below a list of data points:

form label {
  width: 140px;
  float: left;
}
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px 10px;
}

<form>
<ol>
<li>
  <label><br/><br/><br/><br/>Recent data</label>
  <ol>
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>28 96</li>
  </ol>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>

It renders like this:

How would you recommend I get it to line up just right?
Namely, “Recent data” should line up with the “28 96” line and, perhaps trickiest, the “30 95”, despite being in the textarea, should line up as if it’s just another row that comes after the “28 96”.

Answer 1

This is a good case for CSS positioning. Elements with position:absolute are positioned relative to their closest positioned parent. That means we can anchor the labels to the top/left of their containers using position:relative on the <ol>, and position:absolute on the label.

Example here: http://jsfiddle.net/YhQYS/1/

HTML:

<form action="." method="post">
    <ol>
        <li class="recent-data">
          <strong>Recent data</strong>
          <ol>
              <li>3 99</li>
              <li>5 98</li>
              <li>15 97</li>
              <li>28 96</li>
          </ol>
        </li>
        <li class="new-data">
          <label>New data</label>
          <textarea placeholder="30 95" rows="4"></textarea>
        </li>
    </ol>
</form>

CSS:

form > ol {
    background: #98c8dc;
    font-family: serif;
}
.recent-data > ol,
.new-data > ol {
    list-style: none;
    padding: 5px 10px 5px 0;
    line-height:20px;
}
.recent-data li { padding-left:5px; }
.recent-data,
.new-data {
    position:relative;
    padding-left:140px;
}
.recent-data strong,
.new-data label {
    position:absolute;
    left:10px;
    line-height:20px;
}
.recent-data strong { bottom:5px; }
.new-data label { top:5px; }
.new-data textarea {
    font-family:serif;
    font-size:100%;
    padding:4px;
}

This is very simple to reason about, and reliable cross-browser. Note that you shouldn’t use a <label> that doesn’t have a correspondent form control.

---

But that stuff looks like tabular data… it’s your choice, we don’t have enough context to know what mark-up is more appropriate. So here is a more semantically correct approach using tables, rowspan and vertical-align:

HTML:

<form action="." method="post">
    <table id="results">
        <tbody>
            <tr>
                <th rowspan="4" scope="row" class="recent-label">Recent data</th>
                <td>2</td>
                <td>47</td>
            </tr>
            <tr>
                <td>3</td>
                <td>99</td>
            </tr>
            <tr>
                <td>5</td>
                <td>98</td>
            </tr>
            <tr>
                <td>5</td>
                <td>98</td>
            </tr>
            <tr>
                <th rowspan="1" scope="row" class="new-label">New data</th>
                <td colspan="2" class="new-data">
                    <textarea>23</textarea>
                </td>
            </tr>
        </tbody>
    </table>
</form>

CSS:

form {
    background: #98c8dc;
    font-family: serif;
}
#results th,
#results td {
    padding:3px 5px;
}

#results .recent-label {
    vertical-align:bottom;
}
#results .new-label {
    vertical-align:top;
}
#results .new-data {
    padding-left:0px;
}
#results textarea {
    padding:4px; // +1px border
    font-size:100%;
    font-family:serif;
}

Sample at http://jsfiddle.net/quqf8/1/