jQuery Slider pushes content down but keeps it there

I am using a jQuery slider panel that pushes the content down rather than overlap it (intended), which works fine on Chrome but not Firefox. On Firefox, it pushes the content down, but when I close it, the pushed down contents stay put, thus leaving a gap where the panel used to be.

How exactly do I go about fixing this? Here's the code I used for the panel:

&开发者_如何转开发lt;div id="about">
 <div id="panel"> 
  <!-- the content -->
 </div> <!-- end #panel -->
 <p id="top" class="slide"><a href="#" class="btn-slide">+ about</a></p>
</div> <!-- end #about -->

This is the Javascript:

$(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

Thank you for your help. :)

Modify the panel style to include float:left and width:100%

#panel{
    background-color: black;
    display: none;
    float: left;
    height: 250px;
    padding: 50px 0 20px;
    width: 100%;
}

This should fix your problem.