Bottom margin on main content div

I have a layout with a wrapper div and a stick footer using the negative bottom margin method on the wrapper and a fixed height footer. In the wrapper I have a header and a content div. What I need is that er will always be a bottom margin between div content and the footer. What happen now is that if there is a lot of content the content div moves under the footer. How can I correct this

Thank you in advance

Don’t use that method as it is outdated and bad for responsive design.

Depending on which exact method you have used you will need to add a buffer (sometimes called a pusher) between the content and the footer. This is usually achieved by adding padding-bottom to the last element in the content equal to the height of the footer (or adding an empty element with a height equal to the pusher). You can’t usually add padding-bottom to the wrapper because that usually has the 100% height.

However you are better off using this one instead. It requires no set heights, no pushers or margins and will never overlap and will stretch as required to hold content.

Unless you were talking about a fixed footer of course?

1 Like

Works great Paul, thanks a lot

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.