Question

I’m looking for a straight forward css solution that will force labels to top align with their controls in asp. So for example:

<asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
<asp:DropDownList runat="server" ID="cboBox" />

Would appear something like:

Control Label
[[[[[]]]]]]]]]]]]V

Any ideas?

Answer 1

Wrap them both in a span or div:

<span class="field">
    <asp:Label runat="server" AssociatedControlID="cboBox" Text="Control Label" />
    <asp:DropDownList runat="server" ID="cboBox" />
</span>

Then:

.field label,
.field select
{
    display: inline-block;
    vertical-align: top;

    /* achieves same as inline-block for IE7 */
    *display: inline;
    *zoom: 1;
}