Div en 2 colones avec une hauteure adaptable

Bonjour,

j'ai une div principale contenant 2 autres div qui sont mes 2 colones, hors le contenu de ces deux colones n'a jamais la même hauteur.

mon code donne donc ça :

<div class="principale">
<div class="colone1"></div>
<div class="colone2"></div>
</div>

et niveau css ça donne ceci :

.principale{width:100%; background-color:#000;}
.colone1,.colone2{width:49%;background-color:#ff0066;}

le background de ma div principale ne s'affiche que si je mets avant height:300px; ou min-height le problème c'est qu'il ne s'asapte pas en hauteur à la hauteur des colones qui elle varie... du coup quand je réduit la largeur de mon navigateur les colones dépassent du background... comment puis je définir que la hauteur de la div principale soit au moins égale à la hauteur de mes colones ?

Merci de votre aide !!
Rebecca