the input submit is outside of Form into div

Question

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>

don't use percentage with gap, that's your issue – Temani Afif Jan 04 '23 at 08:32 — Temani Afif, Jan 04 '23 at 08:32

Joan Lara · Answer 1 · 2023-01-04T08:25:40.800

-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%;
}

edited Jan 04 '23 at 08:25

answered Jan 04 '23 at 08:20

Joan Lara

1,362
8
15

Run the snippet here (in Chrome) and the login is still outside – mplungjan Jan 04 '23 at 08:32
the issue is actually the % in gap: 10%; and a missing min-width – mplungjan Jan 04 '23 at 08:40
Is that so? It works to me in firefox. – Joan Lara Jan 04 '23 at 08:46

Amit kumar · Accepted Answer · 2023-01-04T08:36:53.397

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

edited Jan 04 '23 at 08:36

answered Jan 04 '23 at 08:26

Amit kumar

137
2
8

@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 04 '23 at 08:35
So why not add it? – mplungjan Jan 04 '23 at 08:36
So the issue is actually the % in `gap: 10%;` and a missing min-width – mplungjan Jan 04 '23 at 08: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 04 '23 at 08:40
@mplungjan yes but if he wants to keep the `gap:10%` then we will have to use fixed height. – Amit kumar Jan 04 '23 at 08:41

the input submit is outside of Form into div

2 Answers2