Cannot vertical align to the bottom on float

Question

I have the following html

<div class="form-group " id="new_change_form_title">
    <label class="pull-left" for="change_title">Title</label>
    <div dir="auto" class=" pull-left explanation">A short sentence that describe what this is about</div>
    <input class="" dir="auto" id="change_title" name="change[title]" required="required" size="30" type="text" />
</div>

I'd like .explanation to be aligned at the bottom as opposed to the result of aligned to top as seen in http://jsfiddle.net/xQwB5/1/

Changing line-height does help, but if the explanation is long, on small screen it causes problems...

is there a way to align .explanation to be closer to input (changing the structure to reach the result is ok)

isn't it similar to this: http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css — Luciano, Dec 06 '13 at 14:53

score 0 · Answer 1 · answered Dec 06 '13 at 15:04

Make the height of explanation equal to the height of the label, then put the text inside another div that is positioned absolutely to the bottom. Like this: http://jsfiddle.net/9JXjK/

.valign {
    position: absolute;
    bottom: 0;
    padding-bottom: 2px;
}

You also have to make .explanation position:relative.

score 0 · Answer 2 · answered Dec 06 '13 at 15:06

There are a couple of things at play here that need to change in order to acheive the effect you describe:

Rather than using floats on the <label> and .explanation, set them to display: inline;
Remove the explicit width on .explanation - it was causing your text to run to two lines.
Now that .explanation is set to display:inline; the vertical-align property will affect it.

Check out this updated fiddle.

I left a red outline around .explanation so you could see the element bounds.

Cannot vertical align to the bottom on float

2 Answers2