the input submit is outside of Form into div

January 4, 2023

I want to create a div container who contain a form, but I have the input submit outside of the container div

.container {
  margin: auto;
  width: 20%;
  padding: 10px;
  border: 1px solid #E1291B;
  display: grid;
  background-color: bisque;
}

.form-login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10%;
}

<div class="container">
  <div class="title">
    <h4>Connectez vous</h4>
  </div>
  <form class="form-login" action="">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="">
    <label for="pass">Mot de passe   </label>
    <input type="password" name="pass" id="">
    <input type="submit" value="Login">
  </form>
</div>

>Solution :

Give min-height to .form-login class. Also you can give .container width:max-width instead of width that way .container will occupy width according to the width of content inside it.

.container {
  margin: auto;
  width: max-content; /*insted of 20%*/
  padding: 10px;
  border: 1px solid #E1291B;
  display: grid;
  background-color: bisque;
  height:max-content;
}

.form-login {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10%;
  min-height:160px; /* give min-height of 160px or more */
}

<div class="container">
  <div class="title">
    <h4>Connectez vous</h4>
  </div>
  <form class="form-login" action="">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="">
    <label for="pass">Mot de passe   </label>
    <input type="password" name="pass" id="">
    <input type="submit" value="Login">
  </form>
</div>