Problème de positionnement

Bonjour,
Vous pouvez voir à cette adresse (sous "Derniers articles") le résultat que je souhaite obtenir, à savoir un résumé d'article avec en haut à gauche les titres et en haut à droite la date de publication et le nom de l'auteur.
Voici ce que j'ai essayé :

<div class="liste-articles">
  <h2>Derniers articles</h2>
    <ul>
      <li class="jaune">
        <div class="liste-articles-entete">
	  <div class="titres">
            <h3 class="titre"><a href="#">Titre</a></h3>
            <p class="soustitre">Sous-titre</p>
          </div> <!-- titres -->
          <div class="infos">
            <small class="date">24 mars 2007</small>
            <br/>
            <small class="auteur"><a href="#">Auteur</a></small>
          </div> <!-- infos -->
          <div class="nettoyeur" />
        </div> <!-- liste-articles-entete -->
	<div class="texte">
          du texte du texte du texte du texte du texte ...
        </div>
	<div class="nettoyeur" />
      </li>
...

.liste-articles li {
	list-style-type: none;
}
.liste-articles li {
	border: 2px solid;
	margin: 10px 0;
}
.liste-articles .liste-articles-entete {
	border-bottom: 2px solid;
        background-color: #99a0c8;
}
.liste-articles p.soustitre {
	font-size: small;
}
.liste-articles .titres {
	float: left;
}
.liste-articles .infos {
	float: right;
	text-align: right;
}

Mais la div liste-articles-entete descend jusqu'en bas ... ce qui fait que tout le cadre est colorié

En bref, voici le résultat attendu :

Et voici le résultat obtenu :


Pouvez-vous m'aider ?
Merci d'avance
Modifié par Tryne157 (22 Apr 2007 - 15:50)