Umeed Umeed - 2 years ago 55
HTML Question

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

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


<div id="content">
<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); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!--End Widget code-->


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

<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 id="content-area">
<!-- Content Placeholder -->



<!--Button will only load on Homepage, this is NOT using Luminate Conditional code, see hmpgonly.js -->
<div class="button-container" id="hmpgonly"> <a href="" class="butun register-butun">Start a Fundraiser</a>


<!-- //Content Placeholder -->



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

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

<h2>Be a Cancer Fighter</h2>


<div id="footer-cell-two" class="footer-cell">
<h2>About the Program</h2>
<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

<div id="footer-cell-three" class="footer-cell">
<h2>Get Started</h2>
<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>


<div id="footer-cell-four" class="footer-cell">
<h2>Canadian Cancer Society</h2>
<li><a title="What we do" href=""target="_blank">What we do</a></li>
<li><a title="Privacy policy" href=""target="_blank">Privacy policy</a></li>
<br />
<br />

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

<br />


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download