html form - make inputs appear on the same line

Question

I am struggling to make two html form inputs  first and last name  appear on the same line side by side  I have tried using float  but that seems to make the rest of the inputs go everywhere  Any advise would be greatly appreciated - here is my code   HTML    lt form action  includes contact php  method  post  gt        lt label for  First Name  gt First Name  lt  label gt       lt input name  first name  id  First Name  type  text    gt       lt label for  Name  gt Last Name  lt  label gt       lt input name  last name  id  Last Name  type  text    gt         lt label for  Email  gt Email  lt  label gt       lt input name  email  id  Email  type  email    gt        lt label for  Telephone  gt Telephone  lt  label gt       lt input name  telephone  id  Telephone  type  tel    gt        lt label for  Wedding  gt Wedding Date  lt  label gt       lt input name  wedding  id  Wedding  type  date    gt        lt label for  Requirements  gt Specific Requirements  lt  label gt       lt textarea name  requirements  id  Requirements  maxlength  1000  cols  25  rows  6  gt   lt  textarea gt        lt input type  submit  value  Submit   gt   lt  form gt     CSS    contactpage form     overflow  hidden    display  block      contactpage form label     margin-top 12px    font-size  1 15em    color   333333    font-family   Roboto Condensed   Helvetica  Arial  sans-serif    font-weight  normal    line-height  1 2      contactpage form input     border  1px solid  DDDDDD    box-shadow  none    -webkit-box-shadow  none    -moz-box-shadow  none    border-radius  0px    -moz-border-radius  0px    -khtml-border-radius  0px    -webkit-border-radius  0px      contactpage form input type  text       width  22     display  inline important    background   F9F9F9    font-family   Helvetica Neue   Arial  Helvetica  sans-serif    font-size  1 1em    line-height  1 4    padding  6px      contactpage form input type  email     contactpage form input type  tel     contactpage form input type  date     contactpage form textarea     width  94     display  block    background   F9F9F9    font-family   Helvetica Neue   Arial  Helvetica  sans-serif    font-size  1 1em    line-height  1 4    padding  6px      contactpage form input type  submit           float right    clear both    display  block    background   F9F9F9    color   333333    font-size  1 5em    font-family   Roboto Condensed   Helvetica  Arial  sans-serif    font-weight  300    font-style  normal    text-transform  uppercase    text-decoration  none    line-height  1 2    padding  20px 20px 40px      contactpage form input type  submit   hover     color   FFFFFF    background   f1bdb5      Here is the JSBin Demo

User · Answer

Try just putting a div around the first and last name inputs/labels like this:

<div class="name">
        <label for="First_Name">First Name:</label>
        <input name="first_name" id="First_Name" type="text" />

        <label for="Name">Last Name:</label>
        <input name="last_name" id="Last_Name" type="text" /> 
</div>

Look at the fiddle here: http://jsfiddle.net/XAkXg/

User · Answer

A more modern solution   Using display  flex and flex-direction  row   x000D   x000D  form   x000D    display  flex     2  display flex to the rescue    x000D    flex-direction  row  x000D    x000D   x000D  label  input   x000D    display  block     1  oh noes  my inputs are styled as block       x000D    x000D   lt form gt  x000D     lt label for  name  gt Name lt  label gt  x000D     lt input type  text  id  name    gt  x000D     lt label for  address  gt Address lt  label gt  x000D     lt input type  text  id  address    gt  x000D     lt button type  submit  gt  x000D      Submit x000D     lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Wrap your multiple form elements in a div with a class that uses   display  table    Inside that div  wrap each label and input in divs with a class that uses   display  table-cell   Stay away from floats   Reference

User · Answer

You can wrap the following in a DIV    lt div class  your-class  gt      lt label for  First Name  gt First Name  lt  label gt     lt input name  first name  id  First Name  type  text    gt     lt label for  Name  gt Last Name  lt  label gt     lt input name  last name  id  Last Name  type  text    gt     lt  div gt    Give each input float left in your CSS    your-class input    float left      example only  You might have to adjust margins   Remember to apply clear left or both to whatever comes after   your-class

User · Answer

This test shows three blocks of two blocks together on the same line   x000D   x000D   group       display block      box-sizing border-box     group gt div       display inline-block      padding-bottom 4px     group gt div gt span  group gt div gt div       width 200px      height 40px      text-align  center      padding-top 20px      padding-bottom 0px      display inline-block      border 1px solid black      background-color blue      color white     input type text        height 1em    x000D   lt div class  group  gt       lt div gt           lt span gt First Name lt  span gt           lt span gt  lt input type  text   gt  lt  span gt       lt  div gt       lt div gt           lt div gt Last Name lt  div gt           lt div gt  lt input type  text   gt  lt  div gt       lt  div gt       lt div gt           lt div gt Address lt  div gt           lt div gt  lt input type  text   gt  lt  div gt       lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

You can make a class for each label and inside it put   display  inline-block    And width the value that you need

User · Answer

use table   lt table align  center  width  100   cellpadding  0  cellspacing  0  border  0  gt    lt tr gt   lt td gt  lt label for  First Name  gt First Name  lt  label gt  lt  td gt   lt td gt  lt input name  first name  id  First Name  type  text    gt  lt  td gt   lt td gt  lt label for  last name  gt Last Name  lt  label gt  lt  td gt   lt td gt    lt input name  last name  id  Last Name  type  text    gt  lt  td gt    lt  tr gt    lt tr gt    lt td colspan  2  gt  lt label for  Email  gt Email  lt  label gt  lt  td gt    lt td colspan  2  gt  lt input name  email  id  Email  type  email    gt  lt  td gt    lt  tr gt    lt tr gt    lt td colspan  4  gt  lt input type  submit  value  Submit   gt  lt  td gt    lt  tr gt    lt  table gt

[html] html form - make inputs appear on the same line

Examples related to html

Examples related to forms

Examples related to css

Examples related to input