CSS/Form - Label Formatting Issue

I’ve run into the following problem and am seeking help. The following are is a stripped down HTML file with an internal style sheet, borders and horrible background color for the sake of brevity and demonstration.

I’d like the div to expand to completely contain the label.

Here is the code and thank you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tester</title>
<style type="text/css">
	html, body {
		height: 100%;
		margin-left: 1px;
	}
	
	body {
		margin: 0px;
		padding: 0px;
		text-align: justify;
		font-family: Arial, Georgia,  Sans-Serif;
		font-size: 13px;
		color: #3c3c3c;
	}
	
	
	/** FORM */
	
	form.contact {	   
	  		padding: 0;   
	  		margin: 0;   
	  		margin-top: 5px;
	  		width: 600px;
			}
	
	form.contact fieldset {      
			position: relative;      
			float: left;      
			clear: both;      
			width: 100%;      
			margin: 0;      
			padding: 0;     
	  		border: 1px solid #DADADA;
	}    
	
	form.contact legend {
			font-weight:bold;
			padding: 5px;
			margin-left: 1em;
			margin-bottom: 1em;
	}
	
	form.contact div {
			clear: left;    
			padding: .5em;
			border: 1px solid red;
			display:block;
			position:relative;
	}	
		
	form.contact label {
			text-transform: capitalize;
			width: 17em;  
			margin-right: 1em;
			margin-left: 1em;
			float: left;
			padding-top:.3em;
			padding-bottom:.3em;
			background-color:lime;
			display:block;
	}
	
	form.contact .buttonarea input {   
	  		background: #F87B1F;
	  		color: white;   
	  		font-weight: bold;   
	  		padding: 5px;
	  		margin:15px;
	}
</style>

</head>
<body>
						
	<!-- Form Start -->
	<form action="" method="post" class="contact">
	
	<!-- Foster Pet Info -->
	    <fieldset>
	    <legend>Foster Animal Specifications</legend>    

		<div>
			<label for="fosteredBefore">Have you ever fostered before with another organization?</label>
			<input type="radio" name="Fostered Before" id="fosteredBefore" value="yes" /> Yes
			<input type="radio" name="Fostered Before" id="fosteredBefore" value="no" /> No 
		</div>

		</fieldset>

		<div class="buttonarea">
			<input type="submit" value="Submit Application"/>
		</div>
		
		</form>
		<!-- End form -->		
</body>
</html>

Is this question related? http://www.sitepoint.com/forums/css-53/two-css-form-formatting-issues-766089.html

The label is floated, which means it is taken out of the normal flow. Its parent (in this case the div) will not expand to enclose it, unless (a) the parent is also floated, or (b) the parent has overflow:hidden; set.

Thanks so much! Problem solved!