title: div does not get centered using margin: auto in IE9
body: <p>I am trying to get a  centered in the space that is left empty by a sidebar. This is how I'd like it to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/0kuRS.png" alt="enter image description here"></p>
  
  <p>I actually managed to make this work OK for most browsers using <code>margin: auto</code> for the <code>div</code> in question, while setting <code>overflow: hidden</code>:</p>
  
  <p><a href="http://jsfiddle.net/pferreir/bc6q5/" rel="noreferrer">Fiddle here</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#header {
      height: 50px;
      background: #224444;
      color: #fff;
  }
  
  #container div {
      padding: 1em;
  }
  
  #content {
      max-width: 400px;
      margin: auto;
      background: #ddd;
      height: 300px;
      overflow: hidden;
  }
  
  #sidebar {
      float: right;
      width: 200px;
      background: #aaa;
      height: 300px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="header"&gt;
          PAGE HEADER
      &lt;/div&gt;
      &lt;div id="sidebar"&gt;
          Sidebar
      &lt;/div&gt;
      &lt;div id="content"&gt;
         Centered Content
          (Works everywhere but on IE9)
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, it does not work with IE9. It is strange as IE8 works OK!</p>
  
  <p>I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.</p>
  
  <p><strong>NOTE</strong>: Please note that the content <code>div</code> should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.</p>