I have a question about CSS that's been bugging me for quite sometime, I'm hoping I can finally get an answer on it.

Here is the scenario, when working on the inside of a page I will make a div, let's call it #container, with the intention that it houses two other divs. These two divs are assigned a class and given a float property. If we give them a temporary border, we can see something like this:

You can see two columns floating next to one another, everything is perfect. However if you give a temporary border to the #container div that is housing them, we see something like this:

I know the picture is small but if you look closely the #container div is flat right on top of the other two divs.

Can someone explain to me why this happens and how I prevent it? I know this is a result from the float property, which has always worked a bit weird. How can I make the #container expand around the other two divs as it should?
The only thing that seems to work is assigning it a min-height.