two divs not align horizontally

Question

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>

Ankit · Accepted Answer · 2022-11-19T05:08:58.950

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>

Project LuLo · Answer 2 · 2022-11-19T05:04:43.850

If I understand your question correctly this should help. First what you want to do is understand what Flex is in html, this first helped me to understand flex.

So you want to add display: flex; to your container/.parent to tell the script that the container is a flex element. After that you should add text-align: center; to center the text inside the .parent. Finnaly, add justify-content: space-evenly; so this way all of the items inside the .parent are spaced evenly from each other.

Also a lot of the things that you put in .child I removed becasue they where unnecessary to achieve what you are going for. I did add margin: 5px; just to make it look more visually appealing.

Your finished code should look like this

        .title{
        padding: 1vh;
        text-transform: uppercase;
        font-size: 2vh;
    }
    
    .wrapper{
        margin: 0;
        padding: 0;
        background-color: yellow;
    }
    
    
    .parent{
        display: flex;
        background-color: red;
        width: 100%;
        text-align: center;
        justify-content: space-evenly;
    }
    
    .child{
      margin: 5px;
    }

 

    <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>

John Li · Answer 3 · 2022-11-19T05:34:03.440

Hope this will be close to your desired result, I added some CSS to match the posted HTML.

Each input is centered in a box half of the container with flex: 1, so there is no need to set width in the code.

You can add more child field here, and the layout will scale naturally.

Example:

.title {
  padding: 1vh;
  text-transform: uppercase;
  font-size: 2vh;
}

.wrapper {
  margin: 0;
  padding: 0;
  background-color: yellow;
}

.parent {
  background-color: red;
  flex: 1;
  display: flex;
  justify-content: center;
}

.child {
  color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

<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>

two divs not align horizontally

3 Answers3