How do I align a label and a textarea?

Question

ends up like

             XXXXX
             XXXXX
Description: XXXXX

I want

             XXXXX
Description: XXXXX
             XXXXX

"Description" sometimes spans multiple lines.

Code:

<p class="DataForm">

<label>Blah blah blah Description:</label>

<asp:TextBox ID="txtBlahblahblahDescription" runat="server" TextMode="MultiLine"  Rows="8" Columns="50"></asp:TextBox><br />

</p>

CSS:

.DataForm
{

}

.DataForm label
{
    display: inline-block;
    font-size:small;
    margin-left:5px;
    width:5%;
    min-width:60px;
}

.DataForm input
{
    margin-right:9px;
    display: inline-block;
    width:21%;
    min-width:30px;
}

Answer 1

Use vertical-align:middle in your CSS.

<table>
    <tr>
       <td style="vertical-align:middle">Description:</td>
       <td><textarea></textarea></td>
    </tr>
</table>

Answer 2

Try setting a height on your td elements.

vertical-align: middle;

means the element the style is applied to will be aligned within the parent element. The height of the td may be only as high as the text inside.

Answer 3

You need to put them both in some container element and then apply the alignment on it.

For example:

<p class="formfield">
    <label for="textarea">Label for textarea</label>
    <textarea id="textarea" rows="5">Textarea</textarea>
</p>

with

.formfield * {
    vertical-align: middle;
}

Answer 4

http://www.artmov.com/dev/snippets/html-textarea-align-label-at-the-top-47/