align textbox and text labels in 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

User · Answer

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

User · Answer

I have found better option    lt style type  text css  gt       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         lt  style gt    Demo here  https   jsfiddle net durtpwvx

User · Answer

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    lt div id  profileRow1  gt       lt div id  profileRow1Col1  class  righty  gt           lt asp Label ID  lblCreatedDateLabel  runat  server  Text  Date Created   gt  lt  asp Label gt  lt br   gt           lt asp Label ID  lblLastLoginDateLabel  runat  server  Text  Last Login Date   gt  lt  asp Label gt  lt br   gt           lt asp Label ID  lblUserIdLabel  runat  server  Text  User ID   gt  lt  asp Label gt  lt br   gt           lt asp Label ID  lblUserNameLabel  runat  server  Text  Username   gt  lt  asp Label gt  lt br   gt           lt asp Label ID  lblFirstNameLabel  runat  server  Text  First Name   gt  lt  asp Label gt  lt br   gt           lt asp Label ID  lblLastNameLabel  runat  server  Text  Last Name   gt  lt  asp Label gt  lt br   gt       lt  div gt       lt div id  profileRow1Col2  gt           lt asp Label ID  lblCreatedDate  runat  server  Text  00 00 00 00 00 00  gt  lt  asp Label gt  lt br   gt           lt asp Label ID  lblLastLoginDate  runat  server  Text  00 00 00 00 00 00  gt  lt  asp Label gt  lt br   gt           lt asp Label ID  lblUserId  runat  server  Text  UserId  gt  lt  asp Label gt  lt br   gt           lt asp TextBox ID  txtUserName  runat  server  gt  lt  asp TextBox gt  lt br   gt           lt asp TextBox ID  txtFirstName  runat  server  gt  lt  asp TextBox gt  lt br   gt           lt asp TextBox ID  txtLastName  runat  server  gt  lt  asp TextBox gt  lt br   gt       lt  div gt   lt  div gt    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

User · Answer

you can do a multi div layout like this   lt div class  fieldcontainer  gt       lt div class  label  gt  lt  div gt       lt div class  field  gt  lt  div gt   lt  div gt    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

User · Answer

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

[html] align textbox and text/labels in html?

Examples related to html

Examples related to css