Expanding container around dynamically added fields

In internet explorer, when I have a field dynamically generated, everything moves down. However, the surrounding container stays the same height and everything just moves on past it.

Try clicking 'Add a Language' or 'Add a Skill' then scroll down to the bottom.

Any suggestions?

http://quspot.com/ie_test/

EDIT/

The syntax is

<div id="content">
    <div class="wrapper"></div>
</div>

.wrapper is expanding just fine (I added a 开发者_如何学Gobackground color to make sure), the #content div is not though.

does adding overflow:hidden; to the container div help?

Update after link provided

it's something to do with the .clearfix, I think there's too many of them applied, and they're inheriting in weird ways

I changed the reset .clearfix from:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

to:

.clearfix {overflow: hidden;}

and it stopped happening, though while that clearfix method works for this form it may not site wide, so you may wan to look at which divs you actually need clearfix on, you should only need it on the content_body divs.. as you only want to contain the floated form elements inside each of these

I sorta fixed it by adding the wrapper's properties diretly on the content and then doing this

<div id="content">
    CONTENT
    <br clear="all" />
</div>

But if anyone has a solution, I'd like to use the wrapper for when I need to add things outside the wrapper in the content area.