Absolutely positioned div on right causing scrollbar when the left doesn't

Question

I\'m trying to \"flank\" a centered div with some design elements that are absolutely positioned outside the main div\'s width. I\'m getting a scroll bar due to the element

Answer 1

Throwing an overflow-x: hidden on the body tag would work in anything that's not IE6/7... but for those two browsers, you'll need to also add overflow-x: hidden to the html tag.

So use what you have now with this adjustment:

html, body { 
        height: 100%; 
        width: 100%;
        margin: 0;
        *overflow-x: hidden;
    }

body { text-align: center; overflow-x: hidden; }

Note that the reason the "*" hack is used in the html, body declaration is because IE8 is unconventional. If you don't use it, IE8 will lose vertical scrollbars as well, not just horizontal. I don't know why. But that solution should be fine.