Basically, I fixated the html and body elements, then built a 100%, 100% height div (no padding, margins) inside it so that I could better control the scrolling of my page compared to other fixed objects.

At the top of that replacement div, I had 3 linear objects making a header.  One was 110px tall at the top, the next was 22px immediately below that (top: 110px), and the next was 10px, immediately below that (top: 132px).

Each of these elements was 100% width (entire width of the viewport).  For some bizare, wacky reason, I kept getting a horizontal scroll bar, even though everything fit on the page.

It was my top element, which made no sense to me because they were all 3 position: absolute; width: 100%; and fixed height, just with varied positioning.  In debugging, I was stumped, as it didn’t matter where I put the objects, in what order, etc.  That top div (the one that was originally on top) was always wider than the screen — in fact, it was wider by the width of the scrollbar.  For some reason, it was getting its width of the viewport from BEHIND the vertical scrollbar, whereas the other 2 for some reason did as they should and excluded the width of the vertical scrollbar in their calculations.

Then I realized, but “no it couldn’t be?!?” — the 2 divs that were working properly had a background image.  More specifically, their background was defined as background: #xxxxxx url(/file/location) repeat-x; but the other div simply had background-color: #111111; as its definition.

So for some reason, using background: vs. background-color: causes the always intelligent IE to change its interpretations.  Go figure right?

So the workaround?  Use background: instead.

background: #111111 url() no-repeat;

And voila, it was fixed.

I HATE YOU IE.