Why am I getting this white space between my section and my footer?

burnedfaceless
burnedfaceless used Ask the Experts™
on
I've experimented with margins and padding to no avail. Understand the box model. What is going on here?

header {
    background-color: #C05746;
    padding-top: 10px;
    padding-bottom: 25px;
    border-bottom: black solid 3px;
    color: gainsboro;
}

h1,
h2,
h3 {
    text-align: center;
}

section {
    padding-top: 1px;
    background-color: #ADC698;
    border-bottom: black solid 3px;
    color: black;
    height: 400px;
}


form {
    padding-top: 50px;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#form-button {
    margin-top: 10px;
}

footer {
    background-color: #493B2A;
    height: 213px;
}

footer p {
    text-align: left;
    color: ghostwhite;
    padding-top: 30px;
    font-size: 1.1em;
    padding-bottom: 3px;
}

Open in new window


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Enter the number of numbers you need to determine the Greatest Common Factor and Least Common Denominator for</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="styles.css">
  <script>

      function generateHTML(number) {
      var master_markup = '<h3>Enter ' + number + ' numbers to find the Greatest Common Factor';
          master_markup += ' and Least Common Denominator.<br><br>';
      var html1 = '<input name="number[]';
      var html2 = '" type="text" size="3" id="number[]';
      var html3 = '">';
      var hidden_input = '<input type="hidden" name="quantity" value="' + number + '">';
      var submit_button = '<input type="submit" value="submit">';
      var i = 1;
      while (i <= number) {
          master_markup += html1 + html2 + html3;
          if (i == number) {
          master_markup += hidden_input;
              master_markup += submit_button;
          }
          i++;
      }
      return master_markup;
      }

    function getNumber() {
      var number = document.getElementById('number');
        var number_value = number.value;
        return number_value;
    }

    function master(){
        var number = getNumber();
        if (Number(number) === parseInt(number)) {
          if (2 > number) {
            alert('The number must be two (2) or higher.');
          }
          else if (number > 10) {
            alert('The number must be less than eleven (11).');
          }
          else {
            var html = generateHTML(number);
              document.getElementById('form-inputs-and-submit').innerHTML = html;
          }
      } else {
            alert('You must enter a whole number/integer.');
        }
    }
  </script>
</head>
<body>
  <header>
    <h1>This website computes the Greatest Common Factor (GCF) and Least Common Denominator (LCD) for a group of numbers.</h1>
  </header>
  <section>
    <h2>It needs to know how many numbers you want to find the GCF and LCD for.</h2>
    <h3>Please enter a number between two (2) and ten (10) to move forward.</h3><h3>They must be whole numbers.</h3>
    <form name="theform" action="process.php" method="post" id="theform">
    <div id="form-inputs-and-submit">
      <input name="number" type="text" class="center" size="2" id="number">
      <button type="button" id="form-button" class="center" onclick="master()">Click to Generate Form</button>
    </div>
    </form>
  </section>
  <footer>
    <p>
      Thank you for using this website.<br> It uses HTML5, CSS3, JavaScript and PHP.<br> Everything except PHP is interpreted by the browser,
      which is on your computer.<br> PHP is interpreted by the server, which is the computer your computer is connected to when you view
      this site.<br> PHP is suited to certain tasks for 2 reasons. <br>First of all it runs on the server and users can't
      prevent its execution by disabling it in their browser like JavaScript. <br>Second it can work with databases and create sessions
      which makes HTML stateless no more.<br><br>
    </p>
</body>
</html>

Open in new window

Screen-Shot.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
At first glance, my guess is that the padding-5op on your <p> tag inside your <footer> is creating the whitespace.

Incidentally, if you weren't aware of them already, the Developer Tools that come with most major browsers nowadays tends to be pretty good at helping you visualize what CSS is doing and often lets you play with / edit the CSS in real-time to validating your theories. In Chrome, for example, hit F12 to pop open the developer tools, and then right-click on your white space on your page and choose Inspect.

Author

Commented:
I removed both paddings and it had no effect.

When I used Chrome developer tools I could not select the white space as an individual element it just kept showing up as body, so my first CSS declaration now sets the body background color to the footer's color.

Thanks, those dev tools are pretty cool.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial