Hide the horizontal scrollbar caused by a specific div

Question

I have the following html:

<div id="container">
   <div id="content"></div>
</div>

The div container is 1,050 pixels wide and includes only a shadow background that repeats vertically.

The content of the div is 950 pixels wide, is located in the middle of the div container (horizontally) and contains the content.

What I need is that the horizontal scrollbar appears only if the browser window is smaller than the contents of the div, but the div container should not call the scrollbar. How can i do this?

overflow-x: hidden does not work.

thank

http://jsfiddle.net/98Eqf/1/

Answer 1

http://jsfiddle.net/hobobne/98Eqf/2/

Answer 2

-, , 950 , . overflow-x:hidden;, , , , overflow-x:scroll; .