Question

Isolated test case (view in IE 7 or IE 8/9 in IE 7 mode)

Viewing this page in IE 7 is causing my width value to be ignored. If you remove the padding value, the width is properly applied, but when you add in the padding, it causes the entire page to grow, and it treats the padding almost as margin. The larger the width of the page, the larger the blank area to the right of the element. I’ve been unable to find which bug this is, and, more importantly, how to fix it. Has anyone seen this and does anyone know a solution?

Things I’ve tried so far:

• zoom fix
• display: inline-block (recommended for double vertical padding issue)
• It isn’t line-height (it’s a width issue…)

Screenshot of the issue:

This div should span the entire width of the page, and no more, but you’ll notice the scrollbar here:

And the result of scrolling to the right:

This should not be there.

Examining the element in the browser tools shows the width to be incorrectly the full width of the page, instead of the full width minus the padding.

Answer 1

Disclaimer: I’ll ignore the functional requirement and your comments on the other answers and just concentrate on the concrete problem.

---

This IE7 specific problem is caused by using an offset (e.g. top, right, bottom or left) on a relatively positioned element. If you offsets a relatively positioned element, then it will basically still retain the whole space of its original position. Note that this doesn’t happen when offsetting absolutely positioned element.

Before the left offset is been applied, the relatively positioned element is due to its width and and the right padding completely out of the viewport and hence a horizontal scollbar will be generated. After the left offset is applied on the relatively positioned element, you’re basically leaving a space of the same size as the offset on the other side of the offset, still outside the viewport.

A bit sane webbrowser will during redrawing however discover that there’s nothing visible outside the viewport and hence hide the scrollbar again. IE7, however, isn’t that smart enough and retains the scrollbar.

After all, using left offset was technically been the wrong solution. You should in first place have used margin-left instead of left. Unlike the offset, the margin doesn’t leave an empty space on the original position, but really pushes the whole element to the desired position.

So, here’s how your script is been fixed:

$('#el').css({
    'width': document.body.scrollWidth - 200,
    'padding-right': 200,
    'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1
});

---

By the way, I wonder how that float: left; makes sense in this construct wherein you apparently want to simulate a 100% width. It’ll probably be for other purposes not visible in the concrete example.