CSS - How to prevent the browser from showing scrollbars when a div goes outside of the window?

Question

I have a centered wrapper with following CSS:

div.wrapper {
width: 1170px;
padding-left:30px;
margin-top: 80px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
position:relative;  
background-color:black; }

inside i have a div with following css:

position:absolute;
top:-26px;
left:517px;
height:63px;
z-index:3;

inside of this div is an image which has 759px width, that makes the wrapper grow larger and makes the browser show a v-scrollbar on lower display resolutions. what i want is to make the image go outside the wrapper but prevent the browser from showing the scrollbar, so that the right side of the image is only shown if your browser window is large enough and the wrapper keeps its 1200px width. i can't make it a background image because it goes over some of the other content. something that is compatible with >= IE7 would be nice.

i uploaded a pic of the page to show what i mean: http://img153.imageshack.us/img153/6070/hpx.jpg

the blue box is the wrapper, it has 1200px width and is ALWAYS centered in the window (unless then window is smaller than 1200px, then it scrolls) the red box is the image (the green bar is not part of it)

Answer 1

You can set overflow: hidden to the wrapper so that content that exceeds the dimensions of wrapper will not be shown.

see overflow