I have a page that has six different PIEs on it.

It starts out with three, and they're all collapsed, like this:

---------------------------------
| + Thingamabobs |
---------------------------------

---------------------------------
| + Widgets |
---------------------------------

---------------------------------
| + Doohickeys |
---------------------------------

When I click the + button in any one of the PIEs, it will expand to show content: (as shown below). The PIE lower down on the page moves out of the way just fine.

---------------------------------
| + Thingamabobs |
---------------------------------

---------------------------------
| - Widgets |
| thing one |
| thing two |
---------------------------------

---------------------------------
| + Doohickeys |
---------------------------------

But then, if I want to edit one of the widgets, I hide the Widgets PIE (style.display = 'none') and display a Edit Widgets PIE (style.display = 'block') in it's place. Again, the Doohickeys PIE moves accordingly.

---------------------------------
| + Thingamabobs |
---------------------------------

---------------------------------
| Edit thing One |
| sub thing one |
| sub thing two |
| sub thing three |
| sub thing four |
---------------------------------

---------------------------------
| + Doohickeys |
---------------------------------

HERE'S THE PROBLEM: When I hide the Edit Widgets PIE (style.display = 'none') and redisplay the Widgets PIE (style.display = 'block'), the contents of the Doohickeys PIE retains its proper spacing from the bottom of the Widgets PIE, but the PIE border creeps up to display inside the Widgets PIE border.

---------------------------------
| + Thingamabobs |
---------------------------------

---------------------------------
| - Widgets |
| thing one |
---------------------------------
| thing two |
|--------------------------------|
---------------------------------

+ Doohickeys

Am I using the wrong display methods? Any other ideas?