Positioning elements in a form using CSS - html

Question

I'm a beginner to CSS, and i want to know the best technique to position elements in a form using only CSS. I just can't get my two buttons to align probably beside each other...
Here's my HTML code :
<form action="creat_fam.php" method ="post" >
<div id="formWrapper">
<label for="fam_name">Family Name : </label>
<input type="text" placeholder="Family Name" name="fam_name" required>
<br/>
<label for="people_count">People count : </label>
<input type="number" name="people_count" min="1" value="1" required>
<br/>
<label for="location">Location : </label>
<input type="text" name="location" placeholder="location" required>
<br/>
<input type="reset" value="Reset">
<input type="submit" name="submit" value="Done">
</div>
</form>
And my CSS code :
#formWrapper {
width : 400px;
padding : 15px;
-webkit-box-sizing : border-box;
}
#formWrapper label {
float:left;
margin-bottom : 15px;
line-height: 25px;
}
#formWrapper input[type="text"] , #formWrapper input[type="number"] {
float :right;
margin-bottom : 10px;
padding : 2px;
width : 250px;
height: 25px;
border:1px solid gray;
}
#formWrapper input[name="submit"] , #formWrapper input[type="reset"] {
margin : 0;
width : 90px;
height: 40px;
border : none;
border-radius : 4px;
background : -webkit-gradient(linear , 0 0, 0 100% , from(#7f7f7f) ,to(#535353));
color : lightgray;
font-weight: bold;
cursor : pointer;
}
And all i get is this :
Thanks in advance.

Answer 1

Although inputs are inline elements, your second button is going to the next line because of the location input. The location input takes up a little bit of invisible space (the margin-bottom) next to the first button, causing the second button to wrap.

Answer 2

Adding float:left; into #formWrapper input[name="submit"] , #formWrapper input[type="reset"] {
} will align the boxes horizontally, the i would put the buttons in their own div and play around with margins so they align right.

Answer 3

I realise this is an older question, but it is prominent in search results, so hopefully this will help others.
Using developer tools, one can see that the container will appear much smaller than the total height of the collective fields. To avoid the need for adjusting margins to 'make it fit', wrap the buttons in their own div (e.g. #buttonsDiv) as suggested by Jack, but apply the CSS of clear:both to the div instead.
Any formatting performed on the buttons will then apply independently from the content above, allowing the buttons to be positioned next to each other effortlessly.