title: Hide horizontal scrollbar caused by specific div
body: <p>i've got the next html:</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The container div is 1050px wide and includes only the shadow background that is repeated vertically.</p>
  
  <p>The content div is 950px wide, is positioned at the middle of container div (horizontal) and includes content.</p>
  
  <p>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?</p>
  
  <p>overflow-x:hidden does not work.</p>
  
  <p>Thx</p>
  
  <p><a href="http://jsfiddle.net/98Eqf/1/" rel="noreferrer">http://jsfiddle.net/98Eqf/1/</a></p>