Question

Sorry for asking something basic here but I have not been able to apply right approach in formatting controls.

Below is a part of the code in ASPX page. I am failing in formatting it properly. I need some help here about what to consider and how to do it. Below is what the output looks like.

I would like the textbox (or dropdown) to align to it’s label correctly. I know I haven’t used stylesheet here but wanted to know if I can achieve without stylesheet. Even if stylesheet is required to achieve format, please suggest what to consider and how to proceed.

What is in ASPX page is below,

<div runat="server" id="DivCCInfo">
<fieldset class="CreditCardInformation">
    <legend>
        <asp:Literal runat="server" ID="CCHeaderLabel" Text= "Credit Card Information" />
    </legend>
    <div>
        <asp:Label ID="CreditCardHolderLabel" runat="server" AssociatedControlID="CreditCardHolder" Text="Cardholder's Name" />
        <br />
        <asp:TextBox ID="CreditCardHolder" runat="server" CssClass="TextBox" MaxLength="30" Width="300" style ="left:-100px" ></asp:TextBox>
        <asp:Label ID="CreditCardTypeLabel" runat="server" AssociatedControlID="CreditCardType" Text="Credit Card Type" />
        <asp:Label ID="CreditCardNumberLabel" runat="server" AssociatedControlID="CreditCardNumber" Text="Credit Card Number" />
        <asp:Label ID="ExpirationLabel" runat="server" AssociatedControlID="ExpirationMonth" Text="Expiration Date"  />
        <asp:Label ID="CVVLabel" runat="server" AssociatedControlID="CVV" Text="CVV Code" />
        <br /><br />
        <asp:DropDownList runat="server" ID="CreditCardType"  Width="105">
            <asp:ListItem Text="VISA"  Value="VISA" />
            <asp:ListItem Text="MasterCard" Value="MasterCard" />
            <asp:ListItem Text="Discover" Value="Discover" />
            <asp:ListItem Text="Amex" Value="Amex" />
        </asp:DropDownList>
        <asp:TextBox ID="CreditCardNumber" runat="server" CssClass="TextBox" MaxLength="16" Width="120"></asp:TextBox>
        <asp:DropDownList runat="server" ID="ExpirationMonth" Width="40">
            <asp:ListItem Text="01" Value="01" />
            <asp:ListItem Text="02" Value="02" />
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="ExpirationYear" Width="60">
            <asp:ListItem Text="2012" Value="2012" />
            <asp:ListItem Text="2013" Value="2013" />
        </asp:DropDownList>

        <asp:TextBox ID="CVV" runat="server" CssClass="TextBox"   MaxLength="4" Width="50"></asp:TextBox>
    </div>
</fieldset>

Answer 1

I can see a fast way of doing this using <table> HTML element:

Something like this:

<table>
    <tr>
        <td>
            <asp:Label
                 ID="CreditCardTypeLabel"
                 runat="server"
                 AssociatedControlID="CreditCardType"
                 Text="Credit Card Type" />
        </td>
        <td>
            <asp:Label
                 ID="CreditCardNumberLabel"
                 runat="server"
                 AssociatedControlID="CreditCardNumber"
                 Text="Credit Card Number" />
        </td>
        <td>
            <asp:Label
                 ID="ExpirationLabel"
                 runat="server"
                 AssociatedControlID="ExpirationMonth"
                 Text="Expiration Date"  />
        </td>
        <td>
            <asp:Label
                 ID="CVVLabel"
                 runat="server"
                 AssociatedControlID="CVV"
                 Text="CVV Code" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:DropDownList
                 runat="server"
                 ID="CreditCardType"
                 Width="105">
                 <asp:ListItem
                      Text="VISA"
                      Value="VISA" />
                 <asp:ListItem 
                      Text="MasterCard"
                      Value="MasterCard" />
                 <asp:ListItem
                      Text="Discover"
                      Value="Discover" />
                 <asp:ListItem
                      Text="Amex"
                      Value="Amex" />
             </asp:DropDownList>
        </td>
        <td>
            <asp:TextBox
                 ID="CreditCardNumber"
                 runat="server"
                 CssClass="TextBox"
                 MaxLength="16"
                 Width="120">
             </asp:TextBox>
        </td>
        <td>
            <asp:DropDownList
                 runat="server"
                 ID="ExpirationMonth"
                 Width="40">
                 <asp:ListItem
                      Text="01"
                      Value="01" />
                 <asp:ListItem
                      Text="02"
                      Value="02" />
             </asp:DropDownList>
             <asp:DropDownList runat="server" ID="ExpirationYear" Width="60">
                  <asp:ListItem Text="2012" Value="2012" />
                  <asp:ListItem Text="2013" Value="2013" />
             </asp:DropDownList>
        </td>
        <td>
            <asp:TextBox
                 ID="CVV"
                 runat="server"
                 CssClass="TextBox"
                 MaxLength="4"
                 Width="50">
             </asp:TextBox>
        </td>
    </tr>
</table>

Just place your controls inside the table elements and they’ll align perfectly allowing you to even left/center/right align them if you desire.