-1

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>

1
  • don't use percentage with gap, that's your issue Jan 4 at 8:32

2 Answers 2

-1

I think you should add min-width to the .container div to prevent it from getting too narrow:

.container {
  margin: auto;
  width: 20%;
  min-width: 170px;
  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>

You could also put width: 96% (for example) in the inputs to make them grow based on the div size:

.form-login input  {
  width: 96%;
}
3
  • Run the snippet here (in Chrome) and the login is still outside
    – mplungjan
    Jan 4 at 8:32
  • the issue is actually the % in gap: 10%; and a missing min-width
    – mplungjan
    Jan 4 at 8:40
  • Is that so? It works to me in firefox.
    – Joan Lara
    Jan 4 at 8:46
-2

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>

5
  • @mplungjan Yes and that because the code posted by the owner contains width:20% and which is why i have suggested him to use width:max-content.
    – Amit kumar
    Jan 4 at 8:35
  • So why not add it?
    – mplungjan
    Jan 4 at 8:36
  • So the issue is actually the % in gap: 10%; and a missing min-width
    – mplungjan
    Jan 4 at 8:39
  • @mplungjan i just did. I did not want him to get confused and stick to his main concern which was related to height.
    – Amit kumar
    Jan 4 at 8:40
  • @mplungjan yes but if he wants to keep the gap:10% then we will have to use fixed height.
    – Amit kumar
    Jan 4 at 8:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.