Align child element to bottom with CSS
- by alex
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.
