CSS | Animate div height change from it's content going from display:none to block
<p>I have a popup div. It has a form, and at the bottom is an error message. The error message goes to display:none when not active. When displayed, it changes the popups size (makes it taller). I want this transition to be smooth and not instant. Here is what I tried :</p>

<pre><code>div {
    -moz-transition: height 1s ease-in-out, left .5s ease-in-out;
    -webkit-transition: height 1s ease-in-out, left .5s ease-in-out;
    -moz-transition: height 1s ease-in-out, left .5s ease-in-out;
    -o-transition: height 1s ease-in-out, left .5s ease-in-out;
    transition: height 1s ease-in-out, left .5s ease-in-out;
}
</code></pre>

<p>This works when I resize divs, but not when switching the div's content from block to none.</p>

<p>EDIT :
There seems to be confusion with what I am trying accomplish. I do not want to animate the display none/block element. I wan't to animate the SIZE (height) of it's PARENT. For instance, when the child suddenly becomes visible, it makes it's parent taller. I do not wan't this height change on the parent to be instant. I want it to be gradual. </p>