Search code examples
csssticky-footer960.gs

Overlapping blocks with CSS sticky footer + 960 grid layout

I downloaded CSS sticky footer and 960 grid system code.

The sticky footer works as expected - if content pane is empty, the footer sticks to bottom of viewport and the footer is pushed down when it is full.

I am using the css sticky footer code with the 960 grid system, but when the content inside the sidebar expands and reaches the footer, the footer overlaps the end of the sidebar content:

http://noseyparka.me.uk/sandbox/

Any idea where I am going wrong and how I can fix this problem?

Solution

  • you're misusing StickyFooter, your wrapper is missing a definition for an additional level to protect the body-content from overlapping the footer.

    to solve it, add the main id to the body-content level (which is the 960gs container in our case) to accommodate:

    <div id="wrap">
    <div class="container_12" id="main">
        <!-- ... -->
    </div>
</div>

    Reference: