Hide horizontal scrollbar caused by specific div

Question

i've got the next html:

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

The container div is 1050px wide and includes only the shadow background that is repeated vertically.

The content div is 950px wide, is positioned at the middle of container div (horizontal) and includes content.

What do I need - that a horizontal scroll bar appears only if the browser window is smaller than content div, but container div shall not cause scroll bar to appear. How can i make it?

overflow-x:hidden does not work.

Thx

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

Answer 1

I would suggest using a media query then, to check if the browser is 950px wide and then make the scrollbar appear. That'll allow you to use overflow-x:hidden; while it's larger and then once it becomes smaller you can just do overflow-x:scroll; and make the bar appear.

Answer 2

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