Container div not expanding in IE when using jquery show() on div inside it

I have been building a form that contains expandable sections with it. The divs are toggled using the hide() and show() methods of jquery.

It all works ok in Chrome and FF, but in IE the main div containing the other ones does not expand to fit when a section is opened up inside it.

I have tried changing various properties such as setting the height of the container div,

<div id='form'>

    <form id='form2'>
        // some form fields
        <div id="section1" style="display: none">
    开发者_如何学C      // more fields
        </div>
        <div id="section2" style="display: none">
          // more fields
        </div>
    </form>

</div>

So when I call show() on #section1 or #section2, #form is not expanding and just staying the same height, which the actual divs being expanded and closed seem to be working ok, they just don't have their nice container behind them.

UPDATE Thanks all for helping - I am now providing more information.

Please view the page in question by going here: Form Page and pressing submit (I have filled in the form with some test data). Then you will see the second form page, which is the one with the problem.

The green icons in the two sections control the div, here is the jQuery script for the first section, as they are both the same:

var toggleMinus = 'wp-content/uploads/2010/01/delete.png';
var togglePlus = 'wp-content/uploads/2010/01/add.png';

$("#openelec").click(function() // when button clicked
{
    var toggleSrc = $(this).attr('src'); // check which icon is shown
    if(toggleSrc == toggleMinus) // if it is a minus
    {
        $(this).attr('src', togglePlus); // change to plus
        $(".elecsite").slideUp(1500); // close the div
    }
    else
    {
        $(this).attr('src', toggleMinus); // change to minus
        $(".elecsite").slideDown(1500); // open the div 
    };
});

View in Chrome or FF and you will see how I want it to act - in IE it just isn't playing ball.

Here is the css as well: (only the main div and the one expanding)

#form{
width: 770px;
background: #DDEEEE;
padding: 10px;
border-top: 1px solid #c60;
height: auto;
text-align: left;

-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.elecsite{
width: 760px;
height: auto;
background: #EFE0E0;
padding: 5px;
border-bottom: 1px solid #DF7401;
float: left;
}

So let's see if any of you mad programmers out there can help me ;) Thanks for helping.

are the section1 and section 2 floated ? if so add a div with clear:both after the expandable divs..

Worked it out! I knew as soon as I posted all that info it would just jump into my head!

The problem was that the container div I wanted to expand had it's corners curved using curvycorners - this meant that IE couldn't re-render it I guess, so I just took the rounding off and added another div below with the rounded corners.

Thanks to the people who helped.