Question

I’ve a code like this:

<div id = "part1">
    <asp:Label id = "label1" CssClass="labels" runat="server" Text="label1" />
    <asp:TextBox id = "textBox1"  runat="server" Text="test1" />
    <br />
    <asp:Label id = "label2" CssClass="labels" runat="server" Text="label2" />
    <asp:TextBox id = "textBox2" " runat="server" Text="test2" />
</div>

<div id = "part2">
    <asp:Label id = "label3" CssClass="labels" runat="server" Text="label3" />
    <asp:TextBox id = "textBox3"  runat="server" Text="test3" />
    <br />
    <asp:Label id = "label4" CssClass="labels" runat="server" Text="label4" />
    <asp:TextBox id = "textBox4"  runat="server" Text="test4" />
</div>

<div id = "part3">
    <asp:Label id = "label5" CssClass="labels" runat="server" Text="label5" />
    <asp:TextBox id = "textBox5"  runat="server" Text="test5" />
   <br />
    <asp:Label id = "label6" CssClass="labels" runat="server" Text="label6" />
    <asp:TextBox id = "textBox6"  runat="server" Text="test6" />
</div>

with the following CSS associated:

.part1
{
 float:left;
 width: 300px;
}
.part2
{
 float:left;
 width: 300px;
}
.part3
{
 float:left;
 width: 300px;
}

.labels
{
 width: 150px;
}

My goal is:
– to have 3 columns of width = 300px;
– in columns (for each line): one label and one textbox
– Every label should be always with width = 150px to have textbox at same position

It seams the columns float well (I can see three different columns) but label just adapt to their content.

What I’m doing wrong?

Thank you

Answer 1

You can’t set width on inline elements, so use this

.labels
{
  width: 150px;
  display:inline-block;
}

Although you have a problem because the inputs won’t adjust their width automatically, so you also need

.part1 input, .part2 input, .part3 input {
  width: 150px;
  display:inline-block;
}

And you may also need to adjust the width settings if you’re using padding/margin/border on your input or label