Search code examples
cssdrupaldrupal-7

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.


Solution

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