Hauteur de div

Bonjour,

Je souhaite adapter la hauteur d'un bloc en fonction de son contenu.
Dans la partie bleue (voir image) apparaît une période (de telle date à telle date).
Dans la partie encadrée apparaît un descriptif suivant la période (le descriptif varie donc d'une période à une autre).
Enfin le cadre est défini par la 3ème div.

Pouvez-vous m'aider à définir une hauteur automatique en fonction du contenu (partie encadrée).

Un bout de mon html :

                        <div class="text-field date">

                            <div class="text-field-left">De<br/>Avr<br/>2010<br/>à<br/>Juin<br/>2010</div>

                            <div class="text-field-right">

                                <div class="title">Stagiaire Métrologie</div>

                                <div class="meta without-icon"><span class="tag">Entreprise - Description</span></div>

                                <div class="text">	<p>Description missions</p>
													<p>Miss1</p>
													<p>Miss2</p>
													<p>Miss3</p>
													<p>Miss4</p>
													<p>Miss5</p></div>

                            </div>

                        </div>

Et le CSS s'y rapportant :

/*Modifier la hauteur entre chaque block*/
    div.text-field {
        padding-bottom: 30px;
        height: 300px;
        clear: both;
        font-family: 'Patua One';
    }

/*Modifier la hauteur du block bleu contenant la date*/
    div.text-field.date div.text-field-left {
        width: 40px;
        padding: 20px;
        height: 260px;
    }

/*Modifier la hauteur du block contenant les infos diplomes et exp*/
    div.text-field div.text-field-right div.text {
        margin-top: 5px;
        height: 222px;
        overflow: hidden;
        text-align: justify;
    }

Dites moi s'il vous manque quelque chose.

Bin cela se fait naturellement en ne spécifiant pas de hauteur pour le bloc conteneur.
Par contre pour tes sélecteur wow ! Tu les simplifier.

Bonjour,

Est-ce que tu pourrais m'envoyer le code modifié ?

Merci d'avance,

J'allais commencé à le faire mais je me suis aussi rendu compte que tu n'as aucune sémantique dans ton HTML.
Si c'est un texte alors il faut utiliser les balises <p>. Pour les dates, il existe les balises <time> avec l'attribut "datetime". Pour les titres, ça va aussi de <h1> à <h6>. Si c'est un entête, y'a <header>, etc.
Tu peux même approfondir encore plus pour le nom de l'entreprise et sa description avec les microformats.
Pour nommer tes éléments, si le nom est unique alors autant passer par un ID.
Pour les sélecteurs, pas besoin dans ton cas de passer par

div.text-field div.text-field-right div.text {}

Tu pourrais directement mettre

.text {}

Mais surtout, tu peux utiliser les autres sélecteurs en CSS. Il n'y a pas que les sélecteurs d'ID et de Classe. Ça te fera un code HTML plus propre.