Ajustement de colonne en fonction d'une autre.

Bonjour,

Je cherche à affiche une colonne qui s'adapte à l'affichage d'une autre colonne.

Je m'explique:
Dans une section que l'on appellera principale j'ai 3 autres section (gauche, milieu, droit)
soit:

Mon code html:
<section class="principale">
<section class="gauche">
<p>
blablabla
<p>
</section>

<section class="milieu">
<p>
blablabla
<p>
</section>

<section class="droit">
<p>
blablabla
<p>
</section>
</section>

Mon code Css:
.principal
{
height: auto;
}

.gauche
{
float: left;
height: 100%;
border-right:5px solid red;
}

.milieu
{
height: 100%;
}

.droit
{
float: right;
height: 100%;
border-left:5px solid red;
}

ce que je souhaite c'est que les trois colonnes face exactement la même hauteur quelque soit le contenu de chacune des colonnes.
Actuellement ma colonne gauche étant petite au niveau contenu ne s'adapte pas au contenu de la colonne qui est la plus grande.

perso la je comprends pas.... (en même tps c'est mon premier site en autodidacte^^)