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.
You can make a class for each label and inside it put:
display: inline-block;
And width
the value that you need.
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
!
use table
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><label for="First_Name">First Name:</label></td>
<td><input name="first_name" id="First_Name" type="text" /></td>
<td><label for="last_name">Last Name:</label></td> <td>
<input name="last_name" id="Last_Name" type="text" /></td>
</tr>
<tr>
<td colspan="2"><label for="Email">Email:</label></td>
<td colspan="2"><input name="email" id="Email" type="email" /></td>
</tr>
<tr>
<td colspan="4"><input type="submit" value="Submit"/></td>
</tr>
</table>
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/
This test shows three blocks of two blocks together on the same line.
.group {
display:block;
box-sizing:border-box;
}
.group>div {
display:inline-block;
padding-bottom:4px;
}
.group>div>span,.group>div>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_
<div class="group">
<div>
<span>First Name</span>
<span><input type="text"/></span>
</div>
<div>
<div>Last Name</div>
<div><input type="text"/></div>
</div>
<div>
<div>Address</div>
<div><input type="text"/></div>
</div>
</div>
_x000D_
A more modern solution:
Using display: flex
and flex-direction: row
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_
<form>_x000D_
<label for="name">Name</label>_x000D_
<input type="text" id="name" />_x000D_
<label for="address">Address</label>_x000D_
<input type="text" id="address" />_x000D_
<button type="submit">_x000D_
Submit_x000D_
</button>_x000D_
</form>
_x000D_
Source: Stackoverflow.com