Boxes and Labels Not Aligned CSS

Question

Based on this answer StackOverflow @Nikita Rybak I have created a set of labels and textboxes following his solution which shows to be working on JSFiddle.

I have copied this and added a few more categories to my ASP project but when loaded into chrome the boxes and text are all out of align.

This is my html file

<div id="User">
<div>
<div class="left">
    <asp:Label ID="lbl_UserName" runat="server" Text="User Name"></asp:Label>
</div>
<div class="right">
    <asp:TextBox ID="txtbx_UserName" runat="server"></asp:TextBox>
    <br />
</div>
</div>

<div>
<div class="left">
    <asp:Label ID="lbl_FirstName" runat="server" Text="First Name"></asp:Label>
</div>
<div class="right">
    <asp:TextBox ID="txtbx_FirstName" runat="server"></asp:TextBox>
</div>
</div>

<div>
<div class="left">
    <asp:Label ID="lbl_Password" runat="server" Text="Password"></asp:Label>
</div>
<div class="right">
    <asp:TextBox ID="txtbx_Password" runat="server"></asp:TextBox>
</div>
</div>

<div>
<div class="left">
    <asp:Label ID="lbl_ConfPassword" runat="server" Text="Confirm Password"></asp:Label>
</div>
<div class="right">
    <asp:TextBox ID="txtbx_ConfPassword" runat="server"></asp:TextBox>
</div>
</div>
</div>

and my CSS file

#Content
{
    position: relative;
    float:none;
    border: 1px solid #000000;
    float: left;
    padding: 80px 40px 60px 40px;
    text-align:center;
    background-color: #F8F8F8;
    left: 0px; right: 0px;
    text-align: center;   
}

#User .left {
    width: 30%;
    float: left;
    text-align: right;}

#User .right {
    width: 65%;
    margin-left: 10px;
    float:left;}

Is there a reason why mine does not work?

Answer 1

It should work okay, though you have a few too many divs in there unnecessarily, and you also have a line break that may be screwing things up. Check out this fiddle

HTML

<div id="User">
    <div class="left">
        <label>User name</label>
    </div>
    <div class="right">
        <input type="text" />
    </div>
    <div class="left">
        <label>First name</label>
    </div>
    <div class="right">
        <input type="text" />
    </div>
    <div class="left">
        <label>Password</label>
    </div>
    <div class="right">
        <input type="text" />
    </div>
    <div class="left">
        <label>Confirm password</label>
    </div>
    <div class="right">
        <input type="text" />
    </div>
</div>​​​​​​​​​​​​

CSS

#User .left {
    width: 30%;
    float: left;
    text-align: right;}

#User .right {
    width: 65%;
    margin-left: 10px;
    float:left;}​

Also, you have a #Content element defined in your CSS nut it is not in the HTML, so that could be causing the problem.

EDIT The only other thing I can think of is that the label control wraps the text in a - maybe try a literal control? The fiddle works fine, so it must be something with webforms controls.

Answer 2

Float sHould be used very carefully. Instead yo can use position attribute to position your div's accordingly.