0

I know there are lots of questions asked about CSS Sticky Footers.

My issue is that my sticky footer is working completely fine the way I want it to-- except on my Portfolio page where I am using JQuery to display my content.

The Footer is overlapping the descriptions in my JQuery plug-in in smaller screen resolutions. I tried adding a min-height for the plug-in but it did not work.

www.toddmilliken.com/portfolio.html

Any help is appreciated, thanks!

-Todd

0

2 Answers 2

1

The style of your footer is the following:

#footer {
    position: relative;
    margin-top: -50px;
    height: 50px;
    clear: both;
    background: #332532;
}

The element overlaps the content above, because the margin-top is set to -50px. Try setting it to 0 and the problem will be solved ;)

0
-1

The easiest fix I can suggest is to put non semantic element with height of 50px at the end of your #wrap container. The code should be similar to:

<div id="wrap">
  <EXISTING CONTENT HERE>
  <div style="height: 50px;"></div>
</div>
<div id="footer">...</div>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.