Div collapses horizontally to width of widest inner element

I am having an issue with collapsing divs in CSS! But not the normal issue. That would be too easy. I have a left floating div which contains two left floated divs. The first of the left floated divs contains text. If t开发者_JS百科he second inner floated div's style is empty, everything works fine and the outer div encompasses the text and both inner divs. What i need to do is set the width of the second div to 10px. Instantly when I do this the outer div collapses to 10px, squishing the text div down. What!? I am able to find some reference to this behaviour existing, but nothing comprehensive about what it is really and now to work around it.

Do you mean to clear the floats? you can overflow:hidden; zoom:1 if the element containing the floats isn't already a float, or if it already isn't somehow clearing them.

It would help if you jsfiddle.net it.