Floating container does not shrink when content does

I have a container in which I might add or remove elements (using javascript)

<div style='float:left;'>
    <p id='myp1'>elem 1</p>
    <p id='myp2'>elem 2</p>
    <p id='myp3'>ele开发者_JAVA技巧m 3</p>
    <p id='myp4'>elem 4</p>
    <p id='myp5'>elem 5</p>
</div>

Whatever I'll do, either add an element or make it bigger (with padding/margin/line-height and such) it will resize to fit.

Whatever I'll do, either remove an element or make it smaller (with padding/margin/line-height and such) it does not shrink.

It lefts me with more and more unused space.

This occurs in firefox only (as I noticed) and wrapping sub-content in other divs/spans/tables and such won't help me the problem still occurs.

(you can notice this bug by adding a border to your containing div)

It might be a normal behaviour that I just dont understand but to me it's just puzzling right now.

So thanks in advance for any advice or explanation at least !

You can make the height auto of the container. so whenever your inner content will be added or removed your container height will automatically adjusted.