Floated divs buiten parent

Hallo allemaal,

Even een kort vraagje. Ik heb het volgende:

<div id="randrecipe">
	<div class="topbox">
		<p>Chipolatapudding</p>
	</div>

	<div class="pic">
		<img src="images/CaribbeanCocktail.png" alt="Caribbean Cocktail" width="104" height="83" />
	</div>

	<div id="inforecipe">
		<b>Ingrediënten</b><br />
		<ul>
			<li>3 el kokoslikeur</li>
			<li>2 el rum</li>
			<li>ananassap</li>
		</ul>
		<b>Instructies</b><br />
		<ul>
			<li>Kokoslikeur en rum in mooi glas schenken.</li>
			<li>Glas opvullen met ananassap.</li>
		</ul><br />
		Voor 1 glas, 45 kcal p.p.		
	</div>
		
	<div id="infobox">
		<div class="topbox">
			<p>Informatie over dit recept</p>
		</div>
				<div class="user">
			<b>Door <br />gebruiker</b> Dieet
		</div>
			<div class="rating">
			<b>Waardering</b> 2,5 sterren
		</div>
	</div>
</div>

En de CSS:

#randrecipe {
	width: 100%;
	height: auto;
	margin: 25px 0 0 0;
	border: 1px solid #FFE4C4;
}

#randrecipe .pic {
	margin: 10px 50% 10px 50%;
}

#randrecipe #inforecipe {
	margin: 0 0 5px 5px;
	float: left;
	height: auto;
}

#randrecipe #inforecipe ul li {
	margin: 0 0 13px 0;
}

#randrecipe #infobox {
	float: right;
	height: auto;
}

Het probleem:

Klik voor originele grootte
Je ziet dat de divs 'inforecipe' en 'infobox' die respectievelijk float: left; en float: right; hebben buiten de parent: 'randrecipe' vallen.

Wat moet er verandert worden aan de CSS code om dat te fixen?

Mvg,
GaMer13