Can't figure out where large white space gap is coming from

Question

In my test page, at the bottom, there is a large white gap between the footer and the body, I can't figure out why.

Test page

HTML:

    <div id="content">        
      <article>
        <div class="social">


        <!--Widget code-->

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <!--End Widget code-->

    <!--FACEBOOK BUTTON

    <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> -->

    <!--End FACEBOOK BUTTON-->
    <div class="sslbreadcrumbs">

    <!--first level-->
    You are here:  <a href="PageNavigator/Ontario/IFE_ON_CommunityPartnerships_splash.html">Cancer Fighters homepage</a> / Sweat
    <!--second level-->

    <!--third level-->

    </div>

    </div>

        <div id="content-area">
        <!-- Content Placeholder -->

    </div>

    <div>
           [[S63:3]]

    <!--Button will only load on Homepage, this is NOT using Luminate Conditional code, see hmpgonly.js -->
    <div class="button-container" id="hmpgonly"> <a href="http://convio.cancer.ca/site/TR/Events/General?pg=informational&fr_id=21959&type=fr_informational&sid=9700" class="butun register-butun">Start a Fundraiser</a>




    </div>



    </div>
        <!-- //Content Placeholder -->
        </div>
        </div>

     </article>

    </div>
   <!--================================================================
        FOOTER
        ==============================================================-->
    <footer>

        <div id="footer-bottom">
            <div class="footer-cell-container">

<div id="footer-cell-one" class="footer-cell">


<h2>Be a Cancer Fighter</h2>
<ul>
[[S51:GEN_ON_Reus_CancerFighter_IFE_Footer]]
<br>
</ul>

</div>

<div id="footer-cell-two" class="footer-cell">
<h2>About the Program</h2>
<ul>
<li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10335">About the Program</a></li>

<li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10336">About the Society</a></li>

<li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10349">Where your money goes</a></li>

<li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10340">FAQs</a></li
</ul>
</div>


<div id="footer-cell-three" class="footer-cell">
<h2>Get Started</h2>
<ul>
<li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?fr_tm_opt=new&pg=tfind&fr_id=[[S334:fr_id]]">Create a fundraiser</a></li>
<li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=existing">Join a fundraiser</a></li>
<li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Participate as an<br />individal</a></li>
<li><a href="TR/UnitFundraisingEvent/General?pg=pfind&fr_id=[[S334:fr_id]]">Pledge a participant<br />or fundraiser</a></li>
<li><a href="Donation2?df_id=[[S42:0:form-id]]&PROXY_ID=[[S334:fr_id]]&PROXY_TYPE=21&FR_ID=[[S334:fr_id]]">Donate now</a></li>
</ul>

</div>


<div id="footer-cell-four" class="footer-cell">
<h2>Canadian Cancer Society</h2>
<ul>
<li><a title="What we do" href="http://www.cancer.ca/en/?region=on"target="_blank">What we do</a></li>
<li><a title="Privacy policy" href="http://www.cancer.ca/en/about-our-site/privacy-policy/?region=on"target="_blank">Privacy policy</a></li>
<br />
<br />
</ul>
</div>



<div id="footer-cell-five" class="footer-cell">
<br>
<ul>
<li>Copyright [[S9:pattern:yyyy]] Canadian Cancer Society </li>
<li>Charitable Registration no. 118829803 RR00001</li>

<br />
</ul>
</div>





            </div>
        </div>
    </footer>  

the CMS conditional S tag you'll see there [[S63:3]] it inserts the body of text and such that you see on the test page.

The css for div id=content:

#content {
    width: 100%;
    max-width: 970px;
    margin: 0 auto 122px auto;
    overflow: auto;
    overflow-y: hidden;
}

When I inspect the page it shows me that content is 970 x 1802, I don't understand where 1802 is being pulled from?

Any suggestion is greatly appreciated! thank you for your time.

Answer 1

1. Open your dev tools and look at .button-container
2. Remove the min-height and margin-top rules and you will see that space disappear.

Granted, now your button is not positioned properly. You may want to rethink the layout of your article body, and as Mr Lister mentioned, not set the position of the final element as relative since it is still taking up space even though it is visually in a separate place.

Answer 2

Change the margin on #content to -100px;

#content {
    width: 100%;
    max-width: 970px;
    margin: 0 auto -100px auto;
    overflow: auto;
    overflow-y: hidden;
}

Answer 3

at first your div #content has a margin-bottom setted.

try with this code:

#content {
  margin-bottom: 0
}

at second I think you have some javascript that resize some div. try to disable some script in your test page (or provide a working plunker)