Why can't I get this blank space on my webpage to go away?

Question

I'm a total amateur, and am learning HTML on my own, for work. I can make simple adjustments and such, but I recently added a customized paypal button for an upcoming charity event. I previously had a picture where the button is supposed to go. I replaced the picture with the button and everything got pushed down to the bottom of the page. I have a hunch that the links above the picture may be taking up the space between, but I am not able to see where the empty space is coming from. Here is a link to the page

here is a snippet of the code in the area where the form (button) meets the links box. I apologize for my wording here, like I said I'm relatively new to all of this.

CSS:

    @charset "UTF-8";
/* CSS Document */
body {
    position: relative;
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: #008d96;
}
#middle_nav_bar {
min-height: 134px;
height: 176px;
width: 976px;
background-color: white;
}
#whicker_park {
top: 20%;
}
#our_story {
    position: relative;
    left: 150px;
    top: -109px;
}
#follow_us {
    position: relative;
    left: 286px;
    top: -218px;
}
#you_can_help {
    position: relative;
    left: 433px;
    top: -327px;
    width: 138px;
}
#quality {
    position: relative;
    left: 575px;
    top: -436px;
    width: 178px;
}
#main_text {
    background-color: #FFFFFF;
    min-height: 200px;
    position: absolute;
    left: 0px;
    top: 812px;
    max-width: 976px;
}
#text {
    position: relative;
    left: 110px;
    top: 75px;
    max-width: 753px;
}
#text2 {
    position: relative;
    left: 110px;
    top: 20px;
    max-width: 753px;
}
p {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    color: #000000;
}
.p {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #000000;
}
.p a:link {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #000000;
}
.p a:visited {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #000000;
}
.p a:hover {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #1F8D96;
}
.p a:active {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #000000;
}
h1 {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    line-height: 28px;
    color: #008D96;
    text-align: left;
}
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 22px;
    line-height: 28px;
    text-align: left;
}
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    line-height: 28px;
    padding-left: 0px;
    margin-left: -75px;
    margin-top: 0px;
    font-weight: normal;
}

#wrapper {
    position: relative;
    width: 976px;
    text-align: left;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#header {
    background-color: #FFF;
    margin: 0px;
    padding: 0px;
    height: 505px;
    width: 976px;
    position: relative;
}
#logo {
    position: absolute;
    top: 26px;
    left: 38px;
}
#star {
    position: absolute;
    top: 170px;
    left: 637px;
}
#arc {
    position: absolute;
    top: 439px;
    left: 635px;
}
#rotator {
    position: absolute;
    top: 214px;
    left: 0px;
    min-height: 373px;
    min-width: 619px;
}
#nav {
    position: absolute;
    top: 35px;
    width: 976px;
    text-align: left;
    left: 32px;
}
h3 {
    text-align: center;
    top: auto;
}
.h3 {
    text-align: center;
    top: auto;
    color: #000000;
}
.h3 a:link {
    text-align: center;
    top: auto;
    text-decoration: none;
    color: #000000;
}
.h3 a:visited {
    text-align: center;
    top: auto;
    text-decoration: none;
    color: #000000;
}
.h3 a:hover {
    text-align: center;
    top: auto;
    text-decoration: none;
    color: #008D96;
}
.h3 a:active {
    text-align: center;
    top: auto;
    text-decoration: none;
    color: #000000;
}
#footer {
    background-color: #D4E7EC;
    min-width: 976px;
    min-height: 150px;
    position: relative;
    top: 20px;
}
#footer_text {
    position: relative;
    top: 30px;
    left: 32px;
}
.center {
    text-align: center;
}
.center2 {
    text-align: center;
    line-height: 8px;
    color: #CC0407;
}
#message {
    position: absolute;
    top: 384px;
    left: 664px;
    z-index: 100;
}
.green {
    color: #1F8D96;
}

HTML:

<!doctype html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bi-County Services</title>
    <!-- bjqs.css contains the *essential* css needed for the slider to work -->
    <link href="bjqs.css" rel="stylesheet" /><!-- load jQuery and the plugin --><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="js/bjqs-1.3.min.js"></script>
    <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700" rel="stylesheet" type="text/css" />
    <link href="css/style_bcs.css" rel="stylesheet" type="text/css" /><script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('images/whicker_park_over.png')">
<div id="wrapper">
<div id="grey_bar_top"><img height="18" src="images/gray_bar_top.jpg" width="976" /></div>

<div id="top_nav_bar"><img height="69" src="images/top_nav_bar.jpg" width="976" />
<div id="nav">
<h3><span class="h3"><a href="index.html">Home</a></span> &nbsp;| &nbsp;<span class="h3"><a href="about_us.html">About Us</a></span> &nbsp;| &nbsp;<span class="h3"><a href="success_stories.html">Success Stories</a></span> &nbsp;| &nbsp;<span class="h3"><a href="contact_us.html">Contact Us</a></span> &nbsp;| &nbsp;<span class="h3"><a href="employment.html">Employment</a></span> &nbsp;| &nbsp;<span class="h3"><a href="https://www.bi-countyservices.com/cafe/html//login.html" target="_blank">Portal</a></span> | &nbsp;<span class="h3"><a href="http://bi-countyservices.com/title_vi_notification.pdf" target="_blank">Title VI</a></span></h3>
</div>
</div>

<div id="header">
<div id="logo"><img alt="" height="80" src="images/logo_text.png" width="701" /></div>
</div>

<div id="star"><img alt="" height="254" src="images/star.png" width="311" /></div>

<div id="arc"><img alt="" height="117" src="images/arc_logo.jpg" width="331" /></div>

<div id="rotator">
<div id="banner-fade"><!-- start Basic Jquery Slider -->
<ul class="bjqs">
    <li><img src="images/rotator1.jpg" /></li>
    <li><img src="images/main_images/ax81501.jpg" /></li>
    <li><img src="images/rotator2.jpg" /></li>
    <li><img src="images/main_images/ax81504.jpg" /></li>
    <li><img src="images/rotator3.jpg" /></li>
    <li><img src="images/main_images/ax81505.jpg" /></li>
    <li><img src="images/rotator4.jpg" /></li>
    <li><img src="images/main_images/ax81502.jpg" /></li>
    <li><img src="images/rotator6.jpg" /></li>
</ul>
<!-- end Basic jQuery Slider --></div>
</div>

<div id="mission"><img src="images/mission.jpg" width="976" height="79" alt="mission_statement" /></div>
<div id="middle_nav_bar">
  <div id="whicker_park"><a href="whicker_park.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/whicker_park_over.png',1)"><img src="images/whicker_park_norm.png" alt="" width="147" height="105" id="Image5"></a>
  <div id="our_story"><a href="our_story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/our_story_over.png',1)"><img src="images/our_story_norm.png" alt="" width="136" height="105" id="Image6"></a></div>
  <div id="follow_us"><a href="https://www.facebook.com/bicountyservicesinc/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/follow_us_over.png',1)"><img src="images/follow_us_norm.png" alt="" width="118" height="105" id="Image7"></a></div>
  <div id="you_can_help"><a href="you_can_help.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/you_can_help_over.png',1)"><img src="images/you_can_help_norm.png" alt="" width="138" height="105" id="Image8"></a></div>
  <div id="quality"><a href="quality.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/quality_over.png',1)"><img src="images/quality_norm.png" alt="" width="178" height="105" id="Image9"></a></div>
  </div>
<div>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="9CBETSUBHDDX4" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="http://www.bi-countyservices.com/images/2018givingtuesday.png" style="border-width: 0px; border-style: solid; width: 975px; height: 460px;" type="image" /> <img alt="" border="0" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width=".5" /><a><img alt="mission_statement" height="81" src="images/mission.jpg" width="976" /></a></form>

</div>

<div id="footer">
<div id="footer_logo"></div>
<div id="footer_text">
<h3><img alt="" height="45" src="images/footer_logo.png" width="300" /></h3>

<h3><span class="h3"><a href="index.html">Home</a></span> &nbsp;| <span class="h3"><a href="about_us.html">About Us</a></span> &nbsp;| <span class="h3"><a href="success_stories.html">Success Stories</a></span> &nbsp;| <span class="h3"><a href="contact_us.html">Contact Us</a></span> &nbsp;| <span class="h3"><a href="employment.html">Employment</a></span> &nbsp;| <span class="h3"><a href="https://www.bi-countyservices.com/cafe/html//login.html" target="_blank">Portal</a></span> | <span class="h3"><a href="title_vi_notification.pdf" target="_blank">Title VI</a></span></h3></div>
</div>
</div>
</div>
<script class="secret-source">
        jQuery(document).ready(function($) {

          $('#banner-fade').bjqs({
            height      : 373,
            width       : 619,
            responsive  : true,
            // control and marker configuration
            showcontrols : false, // show next and prev controls
            centercontrols : false, // center controls verically
            showmarkers : false, // Show individual slide markers
            centermarkers : false, // Center markers horizontally

          });

        });
      </script></body>
</html>

Answer 1

The simple trick is add 'height' attribute to '#whicker_park'

#whicker_park {
    position: relative;
    left: 116px;
    top: -125px;
    width: 178px;
    height: 0px;
}

Answer 2

1.) You probably don't want to display an image if it's just a white box, as have before your #whicker_park div. If you remove this and instead change your middle div to:

#middle_nav_bar {
min-height: 134px;
height: 176px;
width: 976px;
background-color: white;
}

you'll get the same effect but it won't rely on an image, which is going to take up space on your site and potentially affect other elements.

2.) To get your icons back in to place, simply change

#whicker_park {
top: -125px;
}

to

#whicker_park {
top: 20%;
}

3.) Take the form for your paypal button and move it outside of your #wrapper div. After these changes, the site looks how you want it.

Answer 3

The spacing is caused by setting the top & left styles of each of those links to an exact position on the page. It would be more appropriate to give them a css class and style them with an inline display like this:

Edit: and close the whicker_park div correctly as the other answer points out.

.sitelink {
  display: inline-block;
  
  /* these are just to give the divs some visual content to demo here */
  background-color: blue;
  width: 50px;
  height: 50px;
  margin: 10px;
}

<div class="sitelink" id="whicker_park"></div>
<div class="sitelink" id="our_story"></div>
<div class="sitelink"></div>
<div class="sitelink"></div>
<div class="sitelink"></div>
<div class="sitelink"></div>

Answer 4

You never close your whicker_park div (or close it in the wrong place) so the elements below like our_story, follow_us are actually INSIDE the whicker_park ID rather than siblings.

Try closing that div like you do the rest, you also didnt close your "footer" div....