0

The div firstRow and secondRow are not wel aligned with the other inputs. I don't know how to fix that.

Here is the code:

header {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.container {
  width: 550px;
  height: 700px;
  margin: auto;
  text-align: center;
}

form:not(#check) {
  padding: 50px;
  margin: auto;
  border: 1px solid rgb(243, 240, 240);
  border-radius: 20px;
  text-align: center;
  background-color: rgba(225, 208, 199, 0.804);
}

.other input {
  display: block;
  width: 100%;
}

.other input:not(#check) {
  margin-bottom: 10px;
  height: 50px;
}

.firstRow,
.secondRow {
  display: flex;
}

.firstRow input,
.secondRow input {
  margin-bottom: 10px;
  height: 50px;
  flex: 1;
}

button {
  width: 100%;
  height: 50px;
  background-color: rgb(97, 69, 53);
  border-radius: 20px;
}

.box {
  display: flex;
  margin: auto;
}

#check {
  float: left;
}
<header>
  <img src="" alt="logo">
  <p style="color: rgb(6, 6, 6); font-weight: bold; font-size: 40px">Welcome to <span style="color:rgb(97, 69, 53);">BUDGE IT! </span></p>
  <p style="font-size: 30px; font-weight: bold;">SIGN UP to join us </p>
</header>
<div class="container">
  <form action="" method="post">
    <div class="firstRow">
      <input type="text" name="nom" placeholder="First Name">
      <input type="text" name="prenom" placeholder="Last Name" style="float:right;">
    </div>
    <div class="secondRow">
      <input type="tel" name="tel" placeholder="Telephone" style="width:47%;">
      <input type="text" list="choice" placeholder="Gender">
      <datalist id="choice">
                    <option value="Male"></option>
                    <option value="Female"></option>
                </datalist>
    </div>

    <div class="other">
      <input type="email" name="email" placeholder="Email">
      <input type="password" name="pass" placeholder="Password">
      <input type="password" name="passw" placeholder="Confirm password">
    </div>
    <div class="box">
      <input type="checkbox" name="check" value="1" id="check">
      <p style="color:rgb(97, 69, 53); font-size:17px; font-weight: bold;">I accept the Terms of Use & Privacy Policy
      </p>
    </div>
    <p><button type="submit" name="but"><span style="color:white; font-size: 20px; font-weight: bold;">Sign
                        Up</span></button></p>
    <br>
    <hr style="font-weight: bold;">
    <p style="font-weight: bold; color: rgb(97, 69, 53); text-decoration: none; font-size: 20px; ">Already have an account? </p>
    <button style="border-color:rgb(97, 69, 53);background-color: white;"><span
                    style="color:rgb(97, 69, 53); font-size: 20px; font-weight: bold;">Log in</span></button>
  </form>
</div>

<footer style="height: 40px;">
  <p style="border: 1px solid rgb(245, 241, 241) ; background-color: rgb(245, 241, 241); height: 40px; text-align: right;">
    Copyright @EHTP/1GI-2023</p>
</footer>

I tried using flex, and give to lastName and firstName inputs of the div the width 45% so that the margin-right for the first input will be 5% and the argin-left of the second input will be 5%. But none of these worked.

InSync
  • 4,851
  • 4
  • 8
  • 30
hoover
  • 9
  • 3
  • Your `.other input`s are overflowing their parent. Add `input { box-sizing: border-box }` (or even `*`) to avoid having to take paddings and borders into account when calculating widths and such. – InSync May 28 '23 at 22:52

1 Answers1

0

Change .other input width to 98%.

.other input {
      display: block;
      width: 98%;
    }

You can add a new class (say firstCol) and assign it for the first input of each row, and a second class (say secondCol) for the second input of each row.

 <div class="firstRow">
          <input type="text" class="firstCol" name="nom" placeholder="First Name">
          <input type="text" class="secondCol" name="prenom" placeholder="Last Name" style="float:right;">
        </div>
        <div class="secondRow">
          <input type="tel" class="firstCol" name="tel" placeholder="Telephone" style="width:47%;">
          <input type="text" class="secondCol" list="choice" placeholder="Gender">
          <datalist id="choice">
                        <option value="Male"></option>
                        <option value="Female"></option>
                    </datalist>
        </div>

and in CSS.

.firstCol{
      margin-right: 5px
    }
    .secondCol{
      margin-left: 5px
    }


header {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px;
}

.container {
  width: 550px;
  height: 700px;
  margin: auto;
  text-align: center;
}

form:not(#check) {
  padding: 50px;
  margin: auto;
  border: 1px solid rgb(243, 240, 240);
  border-radius: 20px;
  text-align: center;
  background-color: rgba(225, 208, 199, 0.804);
}

.other input {
  display: block;
  width: 98%;
}

.other input:not(#check) {
  margin-bottom: 10px;
  height: 50px;
}

.firstRow,
.secondRow {
  display: flex;
}

.firstRow input,
.secondRow input {
  margin-bottom: 10px;
  height: 50px;
  flex: 1;
}
.firstCol{
  margin-right: 5px
}
.secondCol{
  margin-left: 5px
}
button {
  width: 100%;
  height: 50px;
  background-color: rgb(97, 69, 53);
  border-radius: 20px;
}

.box {
  display: flex;
  margin: auto;
}

#check {
  float: left;
}
<header>
  <img src="" alt="logo">
  <p style="color: rgb(6, 6, 6); font-weight: bold; font-size: 40px">Welcome to <span style="color:rgb(97, 69, 53);">BUDGE IT! </span></p>
  <p style="font-size: 30px; font-weight: bold;">SIGN UP to join us </p>
</header>
<div class="container">
  <form action="" method="post">
    <div class="firstRow">
      <input type="text" class="firstCol" name="nom" placeholder="First Name">
      <input type="text" class="secondCol" name="prenom" placeholder="Last Name" style="float:right;">
    </div>
    <div class="secondRow">
      <input type="tel" class="firstCol" name="tel" placeholder="Telephone" style="width:47%;">
      <input type="text" class="secondCol" list="choice" placeholder="Gender">
      <datalist id="choice">
                    <option value="Male"></option>
                    <option value="Female"></option>
                </datalist>
    </div>

    <div class="other">
      <input type="email" name="email" placeholder="Email">
      <input type="password" name="pass" placeholder="Password">
      <input type="password" name="passw" placeholder="Confirm password">
    </div>
    <div class="box">
      <input type="checkbox" name="check" value="1" id="check">
      <p style="color:rgb(97, 69, 53); font-size:17px; font-weight: bold;">I accept the Terms of Use & Privacy Policy
      </p>
    </div>
    <p><button type="submit" name="but"><span style="color:white; font-size: 20px; font-weight: bold;">Sign
                        Up</span></button></p>
    <br>
    <hr style="font-weight: bold;">
    <p style="font-weight: bold; color: rgb(97, 69, 53); text-decoration: none; font-size: 20px; ">Already have an account? </p>
    <button style="border-color:rgb(97, 69, 53);background-color: white;"><span
                    style="color:rgb(97, 69, 53); font-size: 20px; font-weight: bold;">Log in</span></button>
  </form>
</div>

<footer style="height: 40px;">
  <p style="border: 1px solid rgb(245, 241, 241) ; background-color: rgb(245, 241, 241); height: 40px; text-align: right;">
    Copyright @EHTP/1GI-2023</p>
</footer>
Ibrahim Hamaty
  • 540
  • 2
  • 18