html form - make inputs appear on the same line
css, forms, html, input
Solution
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"`
Problem
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.