Pectus Excavatum Pectus Excavatum - 6 months ago 23
HTML Question

html form - make inputs appear on the same line

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

You can wrap the following in a DIV:

<div class="your-class">

  <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>

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"

Comments