title: Nested DIVs shrink to content
body: <p>I'm trying to use a known method to make my DIV centered inside another DIV horizontally, without knowing the inner DIV's width (shrink to content method) on nested DIVs.</p>
  
  <p><strong>Here's the HTML:</strong></p>
  
  <pre><code>&lt;div class="my-container"&gt;
      &lt;div class="my-wrapper"&gt;
          &lt;div class="item"&gt;
              &lt;span&gt;My Item&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here's the CSS:</strong></p>
  
  <pre><code>div.my-container {
      width: 300px;
      height: 100px;
      padding: 100px 0 0 0;
      border: 1px solid #000;
  }
  
  div.my-wrapper {
      background-color: blue;
      text-align: center;
  }
  
  div.item {
      display: inline-block;
      padding: 0 20px;
      background-color: pink;
  }
  
  div.item span {
      display: inline-block;
      height: 50px;
      background-color: red;
  }
  </code></pre>
  
  <p><strong>Test case on jsFiddle:</strong> <a href="http://jsfiddle.net/ThZxx/2/" rel="nofollow noreferrer">http://jsfiddle.net/ThZxx/2/</a></p>
  
  <p>It looks perfectly OK in all browsers:</p>
  
  <p><img src="https://i.stack.imgur.com/mxdGX.png" alt=""></p>
  
  <p>except Internet Explorer 7:</p>
  
  <p><img src="https://i.stack.imgur.com/OjA0Q.png" alt=""></p>
  
  <p>Looks like the pink DIV <em>(div.item)</em> is not shrinking to content and taking all available space in parent container.</p>
  
  <p>How can i fix this?</p>