Alternative for table mark-up in ASP.NET not working properly

Using Visual WebDeveloper 2010 Express and ASP.NET 4.0

Don't know whether its relevant but the whole thing is in a ContentPlaceHolder and inside an UpdatePanel.

To avoid using the old table tr td model, I have created a simple form like this

<div class="admin-form">
    <asp:Label ID="UserNameLabel" runat="server" 
            CssClass="form-label"
            Text="User Name" />
    <asp:TextBox ID="UserNameText" runat="server"
            Width="200px"/>
    <br />
    <asp:Label ID="PasswordLabel" runat="server" 
            CssClass="form-label"
            Text="Password" />
    <asp:TextBox ID="PasswordText" runat="server"
            TextMode="Password"
            Width="200px"/>
    <br />
    <asp:Label ID="ConfirmPasswordLabel" runat="server" 
            CssClass="form-label"
            Text="Confirm Password" />
    <asp:TextBox ID="ConfirmPasswordText" runat="server"
            TextMode="Password"
            Width="200px"/>
    <br />
    <asp:Label ID="EmailLabel" runat="server" 
            CssClass="form-label"
            Text="Email" />
    <asp:TextBox ID="EmailText" runat="server"
            Width="200px"/>
    <br />
    <br />
    <br />
    <span class="form-label"></span>
    <asp:Button ID="CreateUserButton" runat="server" 
                CssClass="button blue"
                Text="Create New User"/>
</div>

And the CSS

.form-label
{
 width: 300px !important;   
}

This renders incorrectly as

I would like to have all textboxes vertically lined after taking 300px. What is wrong?

P.S: I cannot u开发者_Python百科se HTML Controls like label as I have resx for globalization

The labels are by default displayed inline. You need to display them in block or better inline-block

.form-label
{
    width: 300px !important;   
    display:inline-block;
}