jQuery Fadeout leaves small gap
<p>I'm using the current jQuery to hide fade out a notification div, and then remove it, however when it completes there's an odd gap around the height of a <code>&amp;nbsp;</code> - meaning that subsequent forms and page elements don't display where they were before the notice appeared.</p>

<p>To recap: the fade out and remove is working perfectly but I'd like the gap left over to vanish as well. It's a minor thing, but it's bothering me. </p>

<p>The jquery:</p>

<pre><code>// Fade out any success divs.
$(".success").fadeOut(6000, function(){
    $(".success").remove();
});
</code></pre>

<p>The notification div is being written by PHP on postback, and has the following CSS:</p>

<pre><code>.success {
    background-color: #b3ffb2;
    border: 1px solid green;
}

.box {
    margin: 5px;
    padding: 5px;
}
</code></pre>

<p>The div is very simple:</p>

<pre><code>&lt;div class="success box"&gt;&lt;p&gt;&lt;strong&gt;Success!&lt;/strong&gt;&lt;br /&gt;Done!&lt;/p&gt;&lt;/div&gt;
</code></pre>

<p>Edit: The surrounding markup of the page looks like this:</p>

<pre><code>&lt;div id="wrapper"&gt;

    &lt;div id="navigation"&gt;
        &lt;ul&gt; ... &lt;/ul&gt;
    &lt;/div&gt;

    &lt;div id="container"&gt;
        &lt;div class="success box"&gt;
            &lt;p&gt;&lt;strong&gt;Sucess!&lt;/strong&gt;&lt;br /&gt;
            Done&lt;/p&gt;
        &lt;/div&gt;
        // more content
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>Edit: Using Firebug in FF 3.5.2, I can't see anything being left behind using the inspector. There's just an odd gap. I've also created a screenshot of this phenomena:</p>

<p><img src="http://farm3.static.flickr.com/2559/3836546509%5F4c582707a3%5Fo.jpg" alt="odd gap" /></p>
