This only happens in Internet Explorer 7. It works in FireFox.

Clearly this isn’t a problem when one has control of the site and can guarantee that only left-to-right writing systems will ever be used, but it needs to be borne in mind by those creating (for example) templates, or content management systems that may be used with other languages.

John mentions: “some times the designer is not in control of the contents of the offscreen content (supplied by a third party, for instance). Therefore, we cannot guarantee its width. 999em certainly seems like a large enough offset”

It is worth fixing a width on the offscreened content in that instance, at least to something less than 999em. However, I wouldn’t advise 1px. Make it something sensible.

I’d like to mention that using the left property to prevent this problem relies on not having a horizontal scrollbar. Horizontal scrolling is undesirable so we typically avoid it, anyways, so it almost doesn’t need mentioning.

You may want to consider using the right property instead of the left property. Here’s why: some times the designer is not in control of the contents of the offscreen content (supplied by a third party, for instance). Therefore, we cannot guarantee its width. 999em certainly seems like a large enough offset, but I’ve seen third-party content that was improperly formatted (and therefore didn’t word-wrap for instance). Furthermore, IE6 (ugh) can have performance difficulties when placing content more than a few thousand pixels off the page.

Using right:101% is much more likely to place the content offscreen. There’s still no guarantee that it is truly offscreen even if we also specify other properties like overflow:hidden, but every bit helps.

.offscreen {
position: absolute;
right: 101%;
overflow: hidden;
}

That’s what I use …. er … what I WILL use now that I know not to use the top property!

– John