Question: I have the following code to animate the showing/hiding of a div.

```
$(".headerClosed, .headerOpen").live("click", function(){
  $(this).next().slideToggle("slow");
}

```

This shows and hides a div with the following markup:

```
<div class="details">
  <p>Date</p>
  <p>Text</p>
</div>

```

The problem is in IE(surprise, surprise!) when the div slides down the animation is smooth until the end when it jerks. I know this is due to the padding/margin settings of the div. 

If I use a <div> instead of <p> then the animation is smooth, but as soon as I add any padding or margin to the <div> then the animation jerks. How can you slide down a nice looking div with spacing if the padding and margin settings make it jerk?

Answer: 
Wrap the div inside another div. Add the padding/margin to the inner div, and call the animation on the outer div.

```
<div class="details">
   <div class="hasMargins">
    <p>Date</p>
     <p>Text</p>
   </div>
</div>

```
Your margins are likely collapsing. When you apply a `float`, `overflow: auto` or `overflow: hidden` to the slided element, that should no longer occur.

jQuery sets `overflow: hidden` during the animation, so the margins don't collapse. When the animation is done, this property is removed. The margins of the `<p>` collapse again, hence you get a little jerky jump at the end.