CSS : problème sur display:table-cell avec largeur en %

Bonjour,

Je profite de "ma mise à jour" en CSS3 pour refaire un CV en ligne non publique qui me sert pour faire des tests.
J'ai notamment une partie que je souhaite mettre en place avec un

display:table-cell

afin d'aligner données et bordures. Chaque ligne d'expérience est composée de deux paragraphes (classe "date" et classe "description") qui mis côte-à-côte donne l'impression d'un tableau (mais je ne souhaite pas utiliser de tableau car ce ne sont pas sémantiquement parlant des données tabulaires). Une image valant mieux qu'un long discours, voici l'idée du rendu final :
http://xavier.leost.alwaysdata.net/images/rendu_final.jpg
(ne pas tenir compte des alignement des textes, etc., c'est une copie d'écran de mon projet sur Photoshop).

Sur ma page, je mets des largeur en % pour qu'elle s'adapte en largeur à la taille de l'écran du visiteur. Le problème c'est qu'en mettant des largeurs cumulées = 100% sur les deux premiers paragraphe de ma première "ligne" d'expérience, je pensais que, tout naturellement (suis-je naïf, n'est-ce pas ? ), la deuxième ligne passerait en dessous... Hé bien non ! Et, même avec des % qui font plus que 100% entre mes deux "cellules", la deuxième ligne reste à droite, imperturbable...

Donc, soit j'ai quelque chose dans ma CSS qui perturbe l'affichage de ces lignes, soit je n'ai pas tout compris au comportement du display:table-cell (je penche pour cette solution, notamment avec la question de savoir s'il faut obligatoirement avoir un display:table avant ?)

Je vous donne le lien de la page, comme ça vous verrez de quoi je parle tout en ayant le code html et la css. : =>ma page

Pouvez-vous m'aider à comprendre ce qu'il se passe (et accessoirement à régler ce problème ^^)

Merci d'avance pour vos lumières !!!
Modifié par Nogard (23 Apr 2014 - 21:18)

Bon, en testant et en insérant un <div> pour chaque groupe de deux lignes, et en utilisant le pseudo-selecteur "~" ça marche...

<div>
 <p class="date">1<sup>er</sup> mars 2011 &agrave; aujourd'hui</p>
 <p class="description"><span class="intitule">Chef de projets </span><span class="infos"> - CDI - Pixid - Courbevoie - </span><span class="mission">Administrateur et support niveau 2 sur la plate-forme Pixid, gestion de projets clients et fournisseurs, formation utilisateurs, r&eacute;daction de proc&eacute;dures et manuels.</span></p>
</div>

au lieu de

<p class="date">1<sup>er</sup> mars 2011 &agrave; aujourd'hui </p>
<p class="description"><span class="intitule">Chef de projets </span><span class="infos"> - CDI - Pixid - Courbevoie - </span><span class="mission">Administrateur et support niveau 2 sur la plate-forme Pixid, gestion de projets clients et fournisseurs, formation utilisateurs, r&eacute;daction de proc&eacute;dures et manuels.</span></p>

CSS

#experience {width: 100%}
#experience ~ div {display:table}
.date, .description {display: table-cell; border-top: 1px solid #e5eaee;}
.date {width: 19%;text-align:right;color: #8da7b6;border-right: 1px dotted #cad7e0;background-color:#f8f9fa;padding-right: 10px;}
.description {width: 78%;}

Mais, cela m'a obligé à insérer des balises qui n'ont aucune valeur sémantique. Etant puriste, sémantiquement parlant, est-ce que quelqu'un a autre chose à me proposer pour avoir le rendu final sans être obligé d'ajouter des <div> ?

Je ne suis pas sur de bien saisir la problematique , mais :

Tout d'abord entre le visuel et le site, je verrais des titres, paragraphe et liste pour bien rangé tout ça plutôt que 2 paragraphes dans un simple div pour dispatcher les descriptions de chaque expérience.

L’élément qui reçoit le display:table; peut se voir attribué une largeur.
l'un des deux éléments composant les cellules peut recevoir une largeur, l'autre occuperas l'espace restant.
Pour fixé les largeurs, tu peut aussi te servir de table-layout:fixed; conjointement à display:table.

Le N° de tel sur le C.V. me fait dire qu'on est voisin , ... à +-1mn de vol d'oiseau .
Bonne chance.

Pour le balisage , je verrais plutôt un truc du genre :

<section><h1>1er mars **** à aujourd'hui</h1>
<div>
  <h2>Chef de projets</h2><p> - CDI - **** - Courbevoie</p><ul><li> Administrateur et support niveau 2 sur la plate-forme ****</li><li>gestion de projets clients et fournisseurs,</li><li> formation utilisateurs, rédaction de procédures et manuels.</li></ul>
  </div>
</section>

et en css quelque chose commençant plus ou moins comme ceci :

section {
  display:table;
  table-layout:fixed;
  width:80%;
  min-width:40em;
  margin:auto;
}
section h1 , section div {
  display:table-cell;
}
section h1 {
  background:#cde;
  font-size:1.2em;
  color:#456;
  width:10em;
  padding:0.5em;
  text-align:right;
}