Problème avec un div

Bonsoir à toutes et à tous,

Je rencontre un petit soucis avec un div qui ne veut pas se positionner correctement à côtés d'un autre enfin du moins il s'y position mais le div qui contient les deux div ne suit pas.

Je m'explique :
J'ai un div principal qui contient deux autres divs. Les deux autres divs correspondent à deux colonnes, une à gauche de 70%, et une autre à droite de 30%.
J'arrive à positionner ces deux divs côtes à côtes mais mon div principal ne s'aggrandit pas en même temps que les deux autres. Les deux div de gauche et de droite passe donc par dessus le design (bottom page etc ...) qui ne s'aggrandis pas en conséquence.

LE CODE :
HTML :

<div class="principal">
<div class="gauche">
Contenue situé à gauche de ma page.
</div>

<div class="droite">
Contenue situé à droite de ma page.
</div>
</div>

CSS :

div.principal{ /*Contenue des pages*/
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	margin: 0px;
	width: 880px;
}

/*POUR LES PAGES SEPAREES EN DEUX */
div.gauche {
	width: 600px;
	margin: 0px;
	padding: 0px;
	float: left;	
}

div.droite {
	width: 150px;
	margin: 0px;
	padding: 0px;
	float: left;	
}
/*FIN*/