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.