Problème d'imbrication horizontale.

Bonsoir à tous!
Je m'essaie aux CSS après avoir lu que les tableaux étaient has been.
J'ai lu beaucoup de tutoriaux et principalement ceux de ce site. J'ai également fait des recherches dans ce forum avant de poster mon sujet. Cependant je patauge, car j'ai trop d'info et je m'y perd avec le problème d'imbrication.
Je souhaite simplement pour l'affichage de mes news, faire suivre 3 blocs horizontalement. J'ai vu qu'un des tutoriaux ici en parlait, cependant mes trois blocs n'auront pas de taille fixe.
C'est à dire que le premier bloc sera "source:" il peut ou pas y avoir un nom derrière; le troisième affichera la date (qui variera de quelques pixels suivant le jour affiché) et le deuxiéme est une zone tampon où rien ne sera affiché, permettant qu'une fois les trois alignés, quelle que soit leur taille, face une ligne de taille fixe.
Voici ce que j'ai crée (ne criez pas au scandale)

html:

<table weight="575" cellpadding="0" cellspacing="0" border="0">
 
    <tr><td>

        <div class="conteneur">   titrediv</div>

        <div class="arborescence">a la une>>sport</div>
	 

          <div><img alt="X"  class="image"/> 
              <p ><a ="href:NewsToNextUrl">titre de la news</a></p><br>
            <p ><sommaire de la news></p>
	  </div>
		

	  <div>
                  <p class="gauche">par:<a ="href:AuthorEmailMailto">nom de l'auteur</a></span> 
                  <p class="centre">&nbsp;</p>
	     <p class="droite">date</p>
          </div>


	  <div>
                 <p class="gauche">source :<mx:text id="NewsSource" /></p>
	  <p class="centre">&nbsp;</p>  
               <p class="droite"><a ="href:NewsToNextUrl">lire la 
          suite</a>,<a ="href:NewsToCommentUrl">commentaires</a></p>
	  </div>


	</td></tr>
	
  </table>

CSS:

.arborescence { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-style: oblique; text-align: left; color: #FF9900; border-color: #EEEEEE #EEEEEE #FF9900; border-style: solid; border-bottom-width: medium}
.image {  float: left; height: 40px; width: 52px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
.conteneur {  position: relative; clip}
.conteneur2 {  position: relative; clip}
.gauche {  float: left; position: relative}
.droite {  float: right; position: relative}
.centre {  clear: left; position: relative}
.conteneur3 {  background-color: #CCCCCC; position: relative}

Malheureusement rien ne va comme je veux. Les blocs ne sont pas sur la même ligne et pire certains s'emboitent.
de plus j'ai du me tromper avec les positions relatives et absolues car sur ma page les news ne s'affichent pas bien alignées en-dessous les unes des autres.

Si vous avez une solution merci d'avance
Modifié par numero7 (11 Oct 2005 - 11:32)

Pour simplifier mon sujet voila ce que j'aimerai obtenir:
|bloc1| bloc2| bloc3|
où bloc1 et 3 seraient des boites avec du texte dont la taille peut varier, bloc2 une zone vide qui s'adapte aux variations des deux autres blocs et l'addition des 3 blocs doit être une valeur fixe.
J'ai pensé déclarer un conteneur de taille fixe en position absolue pour bloc1 +bloc2+ bloc3, une boite de largeur 20% et en position absolue pour les blocs 1 et 3 et enfin une boite clear: both pour le bloc 2 .
Mais ça ne marche pas.
Si quelqu'un avait une idée.