Horizontal Overflow Issue with CSS Sticky Footer

Question

Take a look at http://www.cssstickyfooter.com/ and resize your browser window to < 600px.

Notice how the header and footer elements fall short as the content overflows beyond their width.

Is there any way to prevent this from happening so that when the page scrolls horizontally, the header and footer don't fall short?

Answer 1

This issue can be solved by assigning a min-width to the elements that are not stretching along with the rest of the document.

In a DOM inspector on the example site, try adding:

min-width: 960px;

...to the header and footer. Problem solved! I've used this quite a few times with good results across all browsers and devices.