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:

<form action="includes/contact.php" method="post">      <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" />       <label for="Email">Email:</label>     <input name="email" id="Email" type="email" />      <label for="Telephone">Telephone:</label>     <input name="telephone" id="Telephone" type="tel" />      <label for="Wedding">Wedding Date:</label>     <input name="wedding" id="Wedding" type="date" />      <label for="Requirements">Specific Requirements:</label>     <textarea name="requirements" id="Requirements" maxlength="1000" cols="25" rows="6"> </textarea>      <input type="submit" value="Submit"/> </form>  

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.

Answer 1

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