Boxes and Labels Not Aligned CSS - asp.net

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.