title: IE8 After hiding content the height of the wrapper is still the same
body: <h2>Foreword</h2>
  <p>I've come across one of those weird Internet Explorer things again, and I've hit a wall.
  To be more precise, it's <strong>IE8</strong>. I've also tested in IE7, and there is no problem there, so there's something with IE8..</p>
  <p><em>Note that there is a <a href="http://jsfiddle.net/yT7c2/6/" rel="nofollow noreferrer">JSFiddle example</a> down the bottom of this post that reproduces my problem.</em></p>
  <hr />
  <h2>Quick explanation</h2>
  <p>I've got this <code>ul</code> that's being used to expand/contract content when clicking the <code>span.content_head</code>. By default, the content is first shown.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;spreadsheet_overview&quot;&gt;
      &lt;ul class=&quot;overview_list&quot;&gt;
          &lt;li&gt;
              &lt;div class=&quot;content_head&quot;&gt;
                  &lt;div class=&quot;indicator&quot;&gt;&lt;/div&gt;
                  Recipe calculation
                  &lt;div class=&quot;summation&quot;&gt;
                      &lt;span class=&quot;title&quot;&gt;1 tablet cost:&lt;/span&gt;
                      &lt;span class=&quot;value&quot;&gt;0.09360828&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;container&quot;&gt;Lots of content&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>$(&quot;div.content_head&quot;).click(function(e){
      $(this).next(&quot;.container&quot;).toggle();
      $(&quot;div.indicator&quot;,this).toggleClass(&quot;contracted&quot;);
  });
  </code></pre>
  <hr />
  <h2>The problem</h2>
  <p>The problem occur when I click to contract. Let me first show you how it looks in Firefox, where it works.</p>
  <p><img src="https://i.stack.imgur.com/ibZe9.png" alt="enter image description here" /><br />
  The document consists of</p>
  <ul>
  <li>body - slightly dark gray</li>
  <li>wrapper, bright gray</li>
  <li>dividing column, dark gray</li>
  <li>more dividers, white</li>
  </ul>
  <p>As you can see, the document ends after &quot;recipe calculation&quot;, and the height of the document has adjusted and removed the vertical scrollbars.<br />
  The wrapper has also adjusted its height.</p>
  <p>In Internet Explorer 8, however, when I do the same thing, the wrapper maintain its height as if the content was still shown. Why isn't it adjusting the height in IE?</p>
  <p><img src="https://i.stack.imgur.com/LjZKm.png" alt="enter image description here" /></p>
  <p>I've checked, and the height remains exactly the same as before I hid the content.</p>
  <p>If this is a CSS issue, which I am sure it is, what could it be?</p>
  <hr />
  <h2>JSFiddle</h2>
  <p><a href="http://jsfiddle.net/yT7c2/6/" rel="nofollow noreferrer">Here's a JSFiddle</a> that can reproduce my specific issue. I've tried to cut down the CSS enough to the elements only in this issue.<br />
  It's probably something I've done with the CSS/HTML.<br />
  Hopefully one of you can spot it, 'cause I sure as hell can't...</p>
  <p>Clicking on &quot;Recipe calculation&quot; will hide the content, and you'll notice that the height is still the same. In IE8.</p>
  <p>Appreciate the help!</p>
  <h2>Edits</h2>
  <p>w3d pointed out that when toggling the <code>height: auto</code> attribute in the developer tools, will adjust the wrapper height. After further investigation, it does the same thing when I resize the window.</p>