CODEWITHSUNDEEP
csssticky-footer960.gs
unpossible
unpossible

Reputation: 313

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?

Upvotes: 0

Views: 1173

Answers (3)

frontendzzzguy
frontendzzzguy

Reputation: 3242

If you add a margin-bottom to your container like this

.container_12 {
    margin-bottom: 100px;
    }

This will compensate for the #footer having margin-top: -100px

Upvotes: 0

Eliran Malka
Eliran Malka

Reputation: 16283

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:

Upvotes: 2

user567665
user567665

Reputation:

The link seems fine. Seems like you fixed it. And it has the css embedded in the footer that I was going to suggest: clear:both.

Upvotes: 0

Related Questions