SLC SLC - 7 months ago 11
HTML Question

How do I align a label and a textarea?

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

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;
}
Comments