Question

When using a css background such as in the footer on the page below (in the elements div.footer_head and div.footer_footer), if the browser window is resized to less than about 1000px the divs themselves remain at the full width but scrolling right in the browser causes whitespace to appear where the background should be.

I was sure I’d find a similar question on here but can’t seem to word it correctly enough to find it in search.

If someone could point me in the right direction I’m sure I can figure this out.

Look at how the divs with class footer_head and footer_footer behave when you resize the browser to be quite thin and scroll to the right.

screenshot http://printanomics.unbranded-nomads.co.uk/picture-2.jpg

Answer 1

You need to add a min-width:1000px to .footer-container.

.footer-container {
    float: left;
    line-height: 1.5;
    margin-top: 20px;
    width: 100%;
    min-width: 1000px; /* add this */
}

This will mean the smallest width the .footer-container will get is 1000px. Though after that it will expand to 100%.