Question

I have a form input, and the label spans multiple lines, and I want the corresponding checkbox to appear at the bottom (last line of the label element).

Here is what I was playing with

CSS

.standard-form {
    width: 500px;
    border: 1px solid red;
  }


.standard-form .input-row {
  overflow: hidden;
  margin-bottom: 0.8em;
}

.standard-form label {
  width: 25%;
  float: left;
}

.standard-form .input-container {
  width: 70%;
  float: right;
}

  .standard-form .checkbox .input-container {
  display: table-cell;
  height: 100%;
  vertical-align: text-bottom;

}

HTML

<form class="standard-form">
<div class="input-row checkbox" id="permission">
                        <label for="input-permission">
               Do I hereby grant you permission to do whatever tasks are neccessary to achieve an ideal outcome?            </label>
            <div class="input-container">
                <input type="checkbox" id="input-permission" name="permission" value="true" />            </div>

        </div>
  </form>

It is also online at JSbin.

Is there any way to do this? I notice that div.input-container isn’t expanding, which is the old multi column problem with CSS.

I thought I could get this going with display: table-cell and vertical-align: bottom but I haven’t been able to do it yet. I don’t mind that IE6/7 won’t render it correctly.

I have also tried using a combination of position: relative; with the child position: absolute; bottom: 0; except then I need to specify a height which I can not guarantee will be the height of the label on the left.

Answer 1

See my changes in action: http://jsbin.com/ocovu/2/edit

Here are the relevant declarations:

.standard-form .input-row {
  overflow: hidden;
  margin-bottom: 0.8em;
  position: relative;
}
.standard-form .checkbox .input-container {
  position: absolute;
  bottom:-2px;
  left:25%;
}