1

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

mike-source
  • 1,004
  • 3
  • 17
  • 32

2 Answers2

0

If you have a look at your css file you will see that the footer width is set to 100% and not 1000px as the other divs. This also applies to your background as your background won't be bigger than the div itself.

I don't know if you use this, but Firebug is a very good Firefox plugin to identify troubles in CSS files.

No_or_yes
  • 665
  • 1
  • 6
  • 21
  • I use chrome which has something similar I think. I can't seem to figure out which divs would need fixed width and which would need a percentage though... – mike-source Aug 18 '11 at 12:12
  • While coding it is always good to have different browsers because a same website might not look the same on different browsers… I've just applied the min-width: 1000px to .footer-container class – No_or_yes Aug 18 '11 at 12:24
  • Chrome does indeed have something similar. Right click on an element within the document and select "Inspect Eelement" or via the spanner menu visit "tools" >> "developer tools". – Silent Penguin Aug 18 '11 at 12:25
  • I'm aware, not used firebug very much though, chrome > firefox imo atm! I like firefox for debugging javascript better at times though, the errors go into more detail. – mike-source Aug 18 '11 at 12:47
0

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%.

tw16
  • 29,215
  • 7
  • 63
  • 64
  • Thank you! Not a perfect solution, this seemed to leave another 50px whitespace at the right, which is weird... I've made it min-width:1050px; and it goes the full width, but I'm worried that might make horizontal scrollbars appear on a 1024x768 screen. I don't have time to make it support every resolution perfectly but a bit annoying considering everything else is 1000px or less... – mike-source Aug 18 '11 at 12:21