align textbox and text/labels in html? - html

Question

I cant figure it out. How do i align the textbox? I thought using float: left on the labels on the left (then doing it on the input when i notice the input was now on the left without that) but that was completely wrong.
How do i get the textbox align along with the labels on the left of them next to the textbox instead of the far left?
The picture is an example of what i'd like it to look like.

Answer 1

You have two boxes, left and right, for each label/input pair. Both boxes are in one row and have fixed width. Now, you just have to make label text float to the right with text-align: right;
Here's a simple example:
http://jsfiddle.net/qP46X/

Answer 2

Using a table would be one (and easy) option.
Other options are all about setting fixed width on the and making it text-aligned to the right:
label {
width: 200px;
display: inline-block;
text-align: right;
}
or, as was pointed out, make them all float instead of inline.

Answer 3

you can do a multi div layout like this
<div class="fieldcontainer">
<div class="label"></div>
<div class="field"></div>
</div>
where
.fieldcontainer { clear: both; }
.label { float: left; width: ___ }
.field { float: left; }
Or, I actually prefer tables for forms like this. This is very much tabular data and it comes out very clean. Both will work though.

Answer 4

I like to set the 'line-height' in the css for the divs to get them to line up properly. Here is an example of how I do it using asp and css:
ASP:
<div id="profileRow1">
<div id="profileRow1Col1" class="righty">
<asp:Label ID="lblCreatedDateLabel" runat="server" Text="Date Created:"></asp:Label><br />
<asp:Label ID="lblLastLoginDateLabel" runat="server" Text="Last Login Date:"></asp:Label><br />
<asp:Label ID="lblUserIdLabel" runat="server" Text="User ID:"></asp:Label><br />
<asp:Label ID="lblUserNameLabel" runat="server" Text="Username:"></asp:Label><br />
<asp:Label ID="lblFirstNameLabel" runat="server" Text="First Name:"></asp:Label><br />
<asp:Label ID="lblLastNameLabel" runat="server" Text="Last Name:"></asp:Label><br />
</div>
<div id="profileRow1Col2">
<asp:Label ID="lblCreatedDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
<asp:Label ID="lblLastLoginDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
<asp:Label ID="lblUserId" runat="server" Text="UserId"></asp:Label><br />
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br />
</div>
</div>
And here is the code in the CSS file to make all of the above fields look nice and neat:
#profileRow1{width:100%;line-height:40px;}
#profileRow1Col1{float:left; width:25%; margin-right:20px;}
#profileRow1Col2{float:left; width:25%;}
.righty{text-align:right;}
you can basically pull everything but the DIV tags and replace with your own content.
Trust me when I say it looks aligned the way the image in the original post does!
I would post a screenshot but Stack wont let me:
Oops! Your edit couldn't be submitted because:
We're sorry, but as a spam prevention mechanism, new users aren't allowed to post images. Earn more than 10 reputation to post images.
:)

Answer 5

I have found better option,
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/