Question

I have simple page using a two-column page layout that breaks on zooming. Here it is – try zooming in with cmd+:

http://jamesabbottdd.com/ems-with-max-width.html

The header breaks on the right side, causing a horizontal scrollbar to appear. Originally I thought this was due to using pixels for sizing elements and setting max-width. This article is about that very problem:

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Then I overrode pixels with ems but the problem persists.

This intrigues me to no end. I’ve been using CSS for about a decade now, the last 3 years on a high level, but haven’t yet figured out why the above page breaks but this one:

http://framelessgrid.com/

does not, regardless of how closely I zoom in.

Any help greatly appreciated.

Answer 1

Hmmm, it looks a bit like you’ve inadvertently linked together two slightly unrelated observations, making it a bit more difficult to diagnose the actual problem.

Separating the Symptoms

Based on your screenshot, it does appear that your header is coming up with some visual glitches. Additionally, a horizontal scrollbar appears – but rest assured that this is not due to any property of your header. In fact, it is due to your wrapper div below the header, which has a width of 1130px. So when you zoom in that much, it can’t all show on the screen, and thus creates the scrollbar.

---

The True Issue

Returning to the problem with your header though, the reason why the colour is disappearing is because your header div has a width of 100%. If, when you took that screenshot, you were scrolled all the way to the left, you would have seen no problem with the header’s background colour, because it would have covered 100% of the browser’s width. (If you’re wondering where this width of 100% came from, it’s due to the h1 element inside the header; an h1 generally has a default width of 100%, a style you wouldn’t be able to see even with an element inspector like Firebug open.)

Note that the site you provided does not display this issue due to a few things: first, its header doesn’t have a background colour, so you wouldn’t see any kind of issue in that respect (if it did have one though, you’d immediately see that the div doesn’t actually span the whole screen as yours does; it is only a little wider than the text within, and has a fixed width. The title is centred not through only usage of the h1 element’s width of 100% and text-align:center, but is also due to the margin:0 auto applied to the header div. But now, how to fix your issue?

---

A Solution

With the current structure of your page, the easiest solution would be to give your header div a defined width. Well, not a width per se, but rather a min-width, one which is identical to the width of your wrapper div. If you give it the style of min-width:1130px, you should see your problem solved.

I hope this was helpful! (Sorry if it was a little long to read, though.)