CSS Header and Footer are breaking on Zoom-in

I have just finished redesigning this site (www.imustsolutions.co.za) and I have a problem with the header and the footer when the user zooms in (Cntrl + in FF).

Here is the problem: The background color of the footer/hea开发者_如何学编程der does not paint to fill the rest of the screen (horizontally) when the user zooms in.

What am I doing wrong?

Here is the site again: www.imustsolutions.co.za

Thanks in advance.

Regards, M

The problem is that the width of your header is set to 100% (100% of the original browser window), whereas your main content is set to 980px.

So when you are on a full size mode, 100% will be greater than 980px, but on resizing or zooming in 100% will become less than 980px and your header will break whereas the main content will overflow to the right, if need be.

Setting a min-width for both the header and the footer to the same value as the width (plus the padding and margin if any) of the main content is usually enough to fix such issues.

With regard to your site, as it seems your main content is set to 980px you may then try:

#header {min-width:980px;}

That's basically how it's supposed to work. The width of a block-level element is determined by the width of its containing block. And the width of the initial containing block (i.e. the containing block of the html element) has the dimensions of the "viewport" (i.e. the browser window).

In other words, unless you've explicitly set widths on your blocks to make them wider than the viewport, they'll never be wider than the viewport.

You can see the same thing happening on the footer of StackOverflow itself too, for example: if you zoom in on this page until you get a horizontal scrollbar and then scroll sideways, you'll see the gray background chopped off too.

One way you could fix this is by turning the entire page into a float, since the width of floating elements shrinks to fits the dimensions of its contents and isn't contrained by the dimensions of the viewport.

Simply adding float: left to the html or body tag should do the trick. I haven't tested that in all browsers, though.

Your header and footer DOM element should be placed within main content. So your header 100% will be limited with main content size:980px