Issue
I just designed a simple sign-in form to practice CSS and HTML but I can’t align 2 divs horizontally to input my name and surname.
Actually, I can’t understand why if I apply a width of 50% they are stuck on top of each other and if I apply 49% width they are perfectly horizontally aligned as I want.
MY CSS (child width 50%):
I’m expecting with the child property set to 50% they should take 50% of the parent space.. but actually not, why?
what I’m doing wrong, why have to reduce the width to 49% to align them horizontally
see my image 50% width:
I want them aligned side by side like here:
.title{
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper{
margin: 0;
padding: 0;
background-color: yellow;
}
.parent{
background-color: red;
width: 100%;
}
.child{
width: 50%; <--------- HERE THE ISSUE
display: inline-block;
}<body class="body">
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label><br>
<input type="text" id="Name" name="fname">
</div>
<div class="child">
<label for="Surname">Surname:</label><br>
<input type="text" id="Surname" name="fsurname" >
</div>
</div>
</div>
</form>
</div>
</body>Solution
You can use flex-box to achieve this,
I have added this in parent,
display: flex ;
align-items: center;
justify-content: space-evenly ;
You also have to remove width: 50%; from the .child class and add the following CSS,
display:flex ;
align-items:center;
justify-content:center ;
flex-direction:column;
margin: 4px;
Now you can add further CSS as you want.
.title{
padding: 1vh;
text-transform: uppercase;
font-size: 2vh;
}
.wrapper{
margin: 0;
padding: 0;
background-color: yellow;
}
.parent{
background-color: red;
display:flex ;
align-items:center;
justify-content:space-evenly ;
}
.child{
display:flex ;
align-items:center;
justify-content:center ;
flex-direction:column;
margin:4px ;
}<body class="body">
<div class="center">
<h1 class="title">Sign Up New User</h1>
<form class="submit_form">
<div class="wrapper">
<div class="parent">
<div class="child">
<label for="Name">Name:</label>
<input type="text" id="Name" name="fname">
</div>
<div class="child">
<label for="Surname">Surname:</label>
<input type="text" id="Surname" name="fsurname" >
</div>
</div>
</div>
</form>
</div>
</body>Answered By – Ankit
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0