CODEWITHSUNDEEP
cssdrupaldrupal-7
Paul Sham
Paul Sham

Reputation: 3205

Gap at bottom of website

I have a gap between the content of my website and the bottom of the window that I've been trying to remove for a few days and have not found a solution to. Please see http://bpc.paulsham.com or the image below.

Bottom of webpage with unexplainable gap

From what I've tried, the <body> has no margin or padding, the <div id="page-wrapper"> has no bottom margin, and no divs nested in the footer have any bottom margins that should affect it. Using Firebug, it seems like the actual <html> is pulled up from where the window.

This is a custom theme based on the Bartik default theme of Drupal 7, but I think this is a CSS issue. I am, however, beginning to wonder if this is a doctype issue, but everything seems to be validating fine.

Thank you for your help and please let me know if this requires more information.

Upvotes: 3

Views: 6835

Answers (4)

VRV
VRV

Reputation: 29

Go through the Google Debugger, use the select element button button to hover over to find each elements margin or padding. Once you find the Element that shows extra margin/padding add the following CSS to that element.

E.g. p {margin-bottom: 0px;}

Upvotes: 1

Frederik Wordenskjold
Frederik Wordenskjold

Reputation: 10221

The problem is the clearfix in your footer: 

<div id="footer-columns" class="clearfix">

Remove class="clearfix", and the gap is gone.

Update
Apparently not in all browsers; see comments. thirtydot's method is probably the way to go.

Upvotes: 0

Jay
Jay

Reputation: 1404

Try this CSS code:

body{margin-bottom: 0px, padding-bottom: 0px}

Upvotes: 0

thirtydot
thirtydot

Reputation: 228192

  • On #page-wrapper, add overflow: hidden to clear the floats.
  • On #page-wrapper, remove the box-shadow rules.

That removes the gap.

I did manage to add back in the shadow while prevent the gap from re-emerging.

It went something like this:

  • Also add overflow: hidden to #page.
  • Move the width and margin properties from #page-wrapper to #page.
  • Readd the box-shadow properties to #page.
  • Fix the backgrounds - #page-wrapper should not have a background any longer. There's one being applied in a couple of places.

Upvotes: 12

Related Questions