CODEWITHSUNDEEP
htmlcssheaderfooter
user276002
user276002

Reputation: 178

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/header 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

Upvotes: 1

Views: 5506

Answers (3)

Nobal Mohan
Nobal Mohan

Reputation: 486

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

Upvotes: 0

zebulon
zebulon

Reputation: 160

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;}

Upvotes: 3

mercator
mercator

Reputation: 28656

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.

Upvotes: 1

Related Questions