Question

I have some markup for a set of fields within a form:

<ul>
  <li>
    <label>Field label</label>
    <ul>
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="a" size="35" maxlength="35">
            </span>
        </li>    
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="b" size="35" maxlength="35">
            </span>
        </li>
        <li>
            <span>
                <label>some label</label>
                <input type="text" value="c" size="35" maxlength="35">
            </span>
        </li>
    </ul>
  </li>
</ul>

And some CSS to position them:

*{
    position: relative;
}

span{
    position: relative;
    display: inline-block;

}

input{
    float:left;
}

label{
    float:left;
    margin-top: 15px;
    left: 70px;
}

li > ul{
    margin-left: -100px;
    max-width: 400px;
    display: inline-block;
}


li > label{
    float: left;
    vertical-align: top;
    margin: 0;
    left: 0;
    width: 120px;
    display: inline-block;
}

This results in this layout, which is perfect for what I need:

Problem: The system generates error messages when certain fields are filled in incorrectly, resulting in markup like so:

<ul>
  <li>
    <label>Field label</label>
    <ul>
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="a" size="35" maxlength="35">
            </span>
        </li>    
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="b" size="35" maxlength="35">
            </span>
        </li>
        <li>
            <span>
                <label>some label</label>
                <div class="error">some error message.</div>
                <input type="text" value="c" size="35" maxlength="35">
            </span>
        </li>
    </ul>
  </li>
</ul>

This results in something like this:

Instead, I would like the error messages to show up like this:

I have tried making the label within the span to be positioned absolutely and then aligned to the bottom of the span. However, for some reason, it is always being overlapped by the text input even if I give the label a margin-top.

How can I get the form to look like the desired layout when error messages are inserted?

Answer 1

To have the label consistently show underneath the text input, whether or not the error message is present, I would suggest the following approach:

1. Position the label at the bottom of the span.
2. Add margin to the bottom of the input, to grow the span large enough to contain the label.

Here is a reduced example to illustrate the technique:

HTML:

  <span>
      <label>some label</label>
      <div class="error">some error message.</div>
      <input type="text" value="a" size="35" maxlength="35">
  </span>

CSS:

span{
  display: block;
  position: relative;
}

label {
  position: absolute;
  bottom: 0px;
}

input {
  margin-bottom: 20px;
}

http://jsfiddle.net/fuEqB/