Align ASP controls in table using CSS

Question

I'd like to align ASP labels and textBoxes, but I lost in CSS forest. The align of controls are bad. (Sorry my CSS code is bad.) I'd like to put the controls below each other in pairs (Label+TextBox). Help, please.

aspx page:

<asp:TableCell ID="tc0" runat="server" CssClass="searchTableLabelsCell">
    <asp:Label ID="lblrefNo" runat="server" Text="RefNo:" CssClass="searchLabel">
    </asp:Label>
    <asp:TextBox ID="txtRefNo" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:Label ID="lblFrom" runat="server" Text="From:" CssClass="searchLabel">
    </asp:Label>
    <asp:TextBox ID="txtFrom" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:Label ID="lblTo" runat="server" Text="To:" CssClass="searchLabel">
    </asp:Label>
    <asp:TextBox ID="txtTo" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:Label ID="lblCc" runat="server" Text="Cc:" CssClass="searchLabel">
    </asp:Label>
    <asp:TextBox ID="txtCc" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
</asp:TableCell>

CSS

.searchTableLabelsCell
{
    font: 12px Verdana;
    width: 300px;      /* it must be 300px */
    border-style: none;
    padding: 0px;
    margin: 0px;
    background-color: Aqua;
}
.searchLabel
{
    float: left;
    margin-right: 0px;
    font: 13px Verdana;
    text-align: right;
    width: 50px;
    background-color: Blue;
    margin-top:15px;
    position: relative;
    left: 0px;
}
.textBoxes
{
    width: 120px;
    margin-top: 12px;
    position: relative;
    left: 0px;
    resize: none;
}

Requested align:

    lblrefNo    txtRefNo               <!--CELL WIDTH -->
     lblFrom    txtFrom                <!--CELL WIDTH -->
       lblTo    txtTo                  <!--CELL WIDTH -->
       lblCc    txtCc                  <!--CELL WIDTH -->

IE (bad):

    lblrefNo            txtRefNo lblFrom    txtFrom <!--CELL WIDTH -->
    lblTo    txtTo lblCc    txtCc                   <!--CELL WIDTH -->

Chrome (bad):

    lblrefNo        txtRefNo lblFrom
    txtFrom lblTo
                        txtTo
    lblCc    txtCc

-1, but not every developer was born with css-egg-shell.

Satu
– Satu

2012-08-23 11:00:36 +00:00
Commented Aug 23, 2012 at 11:00 — Satu
– Satu, Commented Aug 23, 2012 at 11:00

Narendra · Accepted Answer · 2012-08-23 09:41:15Z

2

Please try the below HTML

Style

.searchLabel
{
     display: block;
}
.textBoxes
{
     display: block;
}

HTML

<asp:TableCell ID="tc0" runat="server" CssClass="searchTableLabelsCell">
<div style="display:block; float: left; text-align: right;">
    <asp:Label ID="lblrefNo" runat="server" Text="RefNo:" CssClass="searchLabel">
    </asp:Label>
    <asp:Label ID="lblFrom" runat="server" Text="From:" CssClass="searchLabel">
    </asp:Label>
    <asp:Label ID="lblTo" runat="server" Text="To:" CssClass="searchLabel">
    </asp:Label>
    <asp:Label ID="lblCc" runat="server" Text="Cc:" CssClass="searchLabel">
    </asp:Label>
</div>
<div style="display:block; float: left; margin-left: 10px; text-align: left;">
    <asp:TextBox ID="txtRefNo" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:TextBox ID="txtFrom" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:TextBox ID="txtTo" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
    <asp:TextBox ID="txtCc" runat="server" CssClass="textBoxes" MaxLength="50">
    </asp:TextBox>
</div>
</asp:TableCell>

edited Aug 23, 2012 at 9:41

answered Aug 23, 2012 at 9:34

Narendra

3,1157 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Caltor Over a year ago

Why is it split into 2 div's? Could it be done with 1 div allowing the labels and textboxes to stay together?

Narendra Over a year ago

If we will put it in single div then it will look like the last alignment option given in the question (chrome bad) . Because span is not block element. And if you apply display:block to span keeping text box and label together then textbox will appear below the label. I hope you know Label is rendered as span.

Collectives™ on Stack Overflow

Align ASP controls in table using CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related