jquery - Showing an element using jQuery doesn't push my footer down in IE8

Question

This question has been asked on several ways, but I've never found a way that really works.

I've recreated a FIDDLE that explains my problem. If you push the button a hidden element is shown, but it doesn't push down the footer. Instead it's shown underneath and below the footer. How can this be solved?

My Fiddle doesn't work in Chromium either.

HTML

<div class="wrapper">
  <div class="content">
    <div class="text">
      Blablablabla
        <div class="button">
          click me
        </div>
    </div>
    <div class="text2">
      YADAYDAYDAYDAYDAYDAYDAYDA
    </div>
  </div>
</div>
<div class="footer">
</div>

jQuery

$('.text2').hide();

$('.button').on('click', function() {
    $('.text2').toggle();
});

Answer 1

It's because you have a set height on your content and the text div is overflowing. Add a min-height to the content div instead

DEMO http://jsfiddle.net/kevinPHPkevin/fDzqm/2/

.content {
    background:red;
    width:500px;
    min-height:200px;  <= this had been added
    margin:0 auto;
}