This is probably a very n00bish question, sorry. I'm trying to get the hang of liquid column layouts and the problem I'm encountering is that the floating divs stretch outside of the containing div UNLESS I float the containing div too (even though logically I don't need to do that. Why would I need to float something left if it's the only column?)

HTML Code:
        <style type="text/css">

            #overallContainer { background-color: red; min-height: 2em; }
            .column {float:left;}
            .blue {background-color: blue;}
            .yellow {background-color: yellow;}
            .green {background-color: green;}

            <div id="overallContainer">
                <div class="column blue">
                    blah <br /> blah <br /> blah <br /> blah <br /> blah
                <div class="column">&nbsp;</div>
                <div class="column green">
                <div class="column yellow">
                    Hello kitty <br /> Hello kitty <br /> Hello kitty <br />
                    Hello kitty <br /> Hello kitty
The problem w/ the outer container div being floaty is that the width gets messed up. And I need to have a container div because in the page I'm working on I have multi column layout with one of the columns containing columns of its own that are wrapped in another div (because I need some non-column content above.

Why won't the container div stretch to fit all of the divs it contains regarless of their floatiness? Is there a way to solve this problem without unnecessarily floating the container div?

I did some googling and couldn't find explanation on why it's doing this. The only think I found is a template that floats the outer container, which I'm trying to avoid because specifying the width messes stuff up and it doesn't make sense to float something that's not really a column.

Thanks in advance.