Adapter la hauter des balise a leur conteneur

Bonjour,

Je veux adapter la hauteur de mes balises div a leur conteneur.

voici le code

<div id="principal">
<div id="bord_gauche"><img src ="bord_gauche.gif" height="100%" width = "100%" /></div>
<div id="contenu"><p> texte </p></div>
<div id="bord_droite"><img src ="bord_droite.gif" height="100%" width = "100%" /></div>
</div>



css:
#principal
{
width:800px;
height:auto;
}

#bord_gauche
{
width:5%;
height:100%;
float:left;
}
#contenu
{
width:90%;
height:500px;
float:left;
}

#bord_gauche
{
width:5%;
height:100%;
float: right;
}

Mon probleme est que;
lorsque la hauteur de la balise contenu augmente a cause du texte qu'il contient, les balises bord_gauche et bord_droite devraient aussi augmenter pour respecter le design que je veux adopter pour le site.
Enfait les images qui sont a gauche et a droite sont des ombres que jai decoupees avec fotoshop. ces ombres doivent avoir la meme hauteur que le texte
Je sais pas comment faire cela.

Si vous avez une solution avec "position:absolute ", developpez la parce que je lai essayer mais je mensors pas.
J'ai besoin de votre aide, proposez moi des solutions s'il vous plait