Div height is not working when trying to increase it. Help appreciated

Question

Thank you for being there. I am total CSS newb and I have an issue - my container div heigh is not increasing at all. I want to add some spacing between upper text and the button, and it is not possible. Adding pixels do nothing to the container div. I tried to change position and display but I have no idea what I am doing. Would you be so kind to help me out? Thank you.

* {
          padding: 0;
          margin: 0;
          font-family: 'Open Sans', sans-serif;
          box-sizing:border-box;
          
        }
    
        body {
          background-color: #3b5998;
        }
        
    
        .form_style {
          margin-bottom: 1em;
         
        }
    
        #container {
          display: block;
          max-height: 500px; 
          max-width: 350px;
          margin: 0 auto;
          box-shadow: 0 0 3px grey;
          background-color: white;
          
        }
    
        #form_wrap {
          margin-top: 60px;
          display: block;
          position: relative;
          background-color: white;
          text-align: center;
          
        }
    
        #space {
        margin-bottom: 10em;
      }
    
        #container #form_wrap .form_style input {
          display: inline-block;
          border-radius: 0.3em;
          padding: 10px;
          width: 90%;
        }
    
        #container #form_wrap .form_style label {
          font-style: italic;
          display: block;
          margin-left: 1.1em;
          text-align: left;
          
        }
    
        #upper-text {
          margin-bottom: 1em;
          margin-top: 30px;
          text-align: center;
          font-style: italic;
          font-weight: lighter;
    
        }
    
        #container .btn button {
          border-radius: 0.3em;
          color: white;
          padding: 5px;
          width: 90%;
          height: 35px;
          margin: 0 20px;
          background-color:lightgreen;
          font-weight: bolder;
        }

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script type="text/javascript" src="./js.js"></script>
      <title>Form</title>
      
    </head>
    <body>
      <div id="space"></div>
      <div id="container">
      <div id="upper-text">
        <h1>I dare you to Sign Up</h1>
        <p>It's free * </p>
      </div>
      <div id="form_wrap">
    <div class="form_style">
      <label>First Name</label><br>
      <input type="text" placeholder="Filip">
    </div>
    <div class="form_style">
      <label>Last Name</label><br>
      <input type="text" placeholder="Nakrętka">
    </div>
    <div class="form_style">
      <label>Email</label><br>
      <input type="email" placeholder="filipnak@piesek.pl">
    </div>
    <div class="form_style">
    <label>Email Again</label><br>
    <input name="email" type="text" id="confemail" placeholder="filipnak@piesek.pl">
    </div>
    <div class="form_style">
      <label>Password</label><br>
      <input name="password" type="password" id="pass">
      </div>
    <div class="btn">
    <button type="submit">Sign Up</button>
    </div>
    </div>
    </div>
    
    </body>
    </html>

I want white background to be higher above the text which says "Sign Up Its Free*" and below the button. — Dummy, Jul 30 '20 at 19:45

score -1 · Accepted Answer · edited Jul 30 '20 at 19:56

I have added #container height to 90vh, and some padding to. #upper-text

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./js.js"></script>
  <title>Form</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      font-family: 'Open Sans', sans-serif;
      box-sizing:border-box;
      
    }

    body {
      background-color: #3b5998;
      height: 100%;
    }
    
    

    .form_style {
      margin-bottom: 1em;
     
    }

    #container {
      display: block;
      height: 90vh; 
      max-width: 350px;
      margin: 0 auto;
      box-shadow: 0 0 3px grey;
      background-color: white;
      
    }

    #form_wrap {
      margin-top: 60px;
      display: block;
      position: relative;
      background-color: white;
      text-align: center;
      
    }

<!--     #space { -->
<!--     margin-bottom: 10rem; -->
<!--   } -->

    #container #form_wrap .form_style input {
      display: inline-block;
      border-radius: 0.3em;
      padding: 10px;
      width: 90%;
    }

    #container #form_wrap .form_style label {
      font-style: italic;
      display: block;
      margin-left: 1.1em;
      text-align: left;
      
    }

    #upper-text {
      padding-top: 20px;
      margin-bottom: 1em;
      margin-top: 30px;
      text-align: center;
      font-style: italic;
      font-weight: lighter;

    }

    #container .btn button {
      border-radius: 0.3em;
      color: white;
      padding: 5px;
      width: 90%;
      height: 35px;
      margin: 0 20px;
      background-color:lightgreen;
      font-weight: bolder;
    }
    
    .free {
      padding-top: 20px
    }

  </style>
</head>
<body>
  <div id="space"></div>
  <div id="container">
  <div id="upper-text">
    <h1>I dare you to Sign Up</h1>
    <p class="free">It's free * </p>
  </div>
  <div id="form_wrap">
<div class="form_style">
  <label>First Name</label><br>
  <input type="text" placeholder="Filip">
</div>
<div class="form_style">
  <label>Last Name</label><br>
  <input type="text" placeholder="Nakrętka">
</div>
<div class="form_style">
  <label>Email</label><br>
  <input type="email" placeholder="filipnak@piesek.pl">
</div>
<div class="form_style">
<label>Email Again</label><br>
<input name="email" type="text" id="confemail" placeholder="filipnak@piesek.pl">
</div>
<div class="form_style">
  <label>Password</label><br>
  <input name="password" type="password" id="pass">
  </div>
<div class="btn">
<button type="submit">Sign Up</button>
</div>
</div>
</div>

</body>
</html>

Please have a look by running snippet.

You've forced things into compliance with specific values, when a simple overflow rule puts the margin inside the parent without being heavy-handed: `#container {overflow: hidden;}` Fixed heights are rarely a good idea on the web. It's better to leave things fluid in most cases. — isherwood, Jul 30 '20 at 20:07
#space was the problem , so i already commented that out, overflow hidden doesnt work here — Suraj Gupta, Jul 30 '20 at 20:10
Sure does. I tried it myself before realizing that this is a duplicate question. https://jsfiddle.net/isherwood/0Lxswmn5/ — isherwood, Jul 30 '20 at 20:12

Div height is not working when trying to increase it. Help appreciated

1 Answers1