CSS multiple float: left issue
===

I'm working my way through CSS and trying to use divs and css to format an input form.  I'm more than sure I'm using the CSS rules wrong and I'm trying to figure out what I'm doing that is wrong.  This image shows the div blocks in different colors.  Each of these different color blocks is a div with a unique ID:

![colored blocks](http://www.ws7m.net/filechute/2012-07-25_10-53-13.png)

What I'm trying to do is to tuck the "country" block up to the right of the "Mail code" block.  In the image above State has float:left, mail code has float left.  If I add float left to the div containing country, all three jump outside of the purple block (rounded border):

![jumped](http://www.ws7m.net/filechute/2012-07-25_10-54-44.png)

Is there some limit to the number of "float: lefts" with in a block?  There is quite a bit of CSS here as I've flailed to try and get things on this form to align the way I want.  I'll post the stuff specifically for this purple area.

This is the big purple enclosing block:

    #applyMailInfoBlock
    {
	background: #D9A4DE;
	margin-top: 15px;	
    }

This is the rounded border under "Project mailing address"

    #applyMailInfo
    {
    	padding: 5px 5px 5px 5px;
    	margin-top: 2px;
    	border: 1px solid black;
    	border-radius: 8px;
    }

The next two are for the street lines.  I separated them into divs so I could provide some spacing.

    #applyProjectaddress1
    {
    	background: #F2AAC7;	
    	margin-top: 5px;
    	width: 80%;
    } 

    #applyProjectaddress2
    {
    	background: #C97B9A;	
    	margin-top: 5px;
    	width: 80%;
    }

City gets it own block:

    #applyProjectcity
    {
    	background: #9C4B6B;	
    	width: 80%;
    }

Ok here is where the flailing begins.  At first I had State, Mail code, and Country as their own little divs with widths.  I tried using float left on each and it did like the image above.  So the last thing I tried was to enclose them in a bigger div called applyProjectStateZipCountry.  The idea was that maybe being in a bigger div would allow the floats for each to work as I wanted.  Well it doesn't help.

    #applyProjectStateZipCountry
    {
    	background: #E3E2AA;
    	width: 90%;
    }

    #applyProjectstate
    {
    	float: left;
    	background: #A4DEA8;	
    	width: 40%;
    }

    #applyProjectmailcode
    {
    	float: left;
    	background: #EDABED;	
    	width: 20%;
    }

    #applyProjectcountry
    {
    	float: left;
    	background: #B8E3AA;	
    	width: 20%;
    }

So the issue is that when I add the final "float: left;" in applyProjectcountry it causes State, mailcode and country to jump out of the purple div.

What am I doing wrong?  Is there some limit to div and float lefts within those divs?  I've been searching around but must float tutorials seem oriented towards floating text around an image.

Any help would be much appreciated.