Positionnement des paragraphe à l'horizontal [Résolu]

Bonjour.

J'ai utilisé ce tutoriel dans une page que je suis en train de faire.

Mon souci, c'est que je ne réussi pas à faire entrer complètement mon texte dans les 2 cases de droite, car le titre de la personne prend 2 lignes au lieu d'une.

J'aimerais savoir s'il est possible de varier la largeur de mes paragraphes de manière à ce que chacun ait une largeur qui lui est propre au lieu d'avoir toute la même largeur.

Voici ma copie de travail en ligne

Merci.
Modifié par largowin (02 Dec 2012 - 20:54)

bonsoir,

D’après ce que j'ai compris tu veux que tout les paragraphe soit à la
même hauteur quel-qu’en soit la longueur du titre ??

J’espère que je ne suis pas à côté de la plaque, si c'est le cas tant pis...
L'idée simple serait d'ajouter un <br /><br /> ou un <hr /> après les titres qui ne font qu'une ligne, l'idée plus compliquée mais plus précise serait de déterminer la taille du bloque de titre le plus haut et d'appliquer cette taille aux autres bloques, avec du JavaScript par exemple.

Non, ce n'est pas ça. J'aimerais pouvoir varier la largeur de chaque paragraphe. Là ils ont tous la même largeur, soit 325px.

p {
	display:table-cell;
	width:325px;
	padding:10px 5px 10px 5px;
	font-size:12px;
	line-height: 120%;
}

.titre {
	font-size:12px;
	color:#ccc;
}

.flotter p
{
margin:0;
padding:0;
text-align:justify;
}
.flotter img
{
float:left;
margin:0 15px 10px 0;
}

.flotter2 img
{
float:left;
margin:0 15px 10px 14px;
}

Si tu fais ça tu va perdre l'aspect "colonne", et tu risque de manquer de place pour tout placer...

mais si tu y tiens, apparemment le fais que la largeur des paragraphes soit "bridées" vient
du fait que tu utilise la propriétés "table-cell" pour le "display", par contre je ne peut pas tant dire plus car je connais guère cette propriété...

Bonjour,
si tu supprimes le width:325px tes paragraphes vont se répartir selon leur taille sur la largeur de leur parent de façon fluide.

Pour obtenir une largeur proche à chaque <p> transformé en colonne pour l'occasion tu leur affectes une classe à chacun comme par exemple:

  <p class="col1">Contenu 1</p>
  <p class="col2">Contenu 2</p>
  <p class="col3">Contenu 3</p>

avec comme style

..col1 {
	width:60%;
}
.col2{
	width:30%;
}
.col3 {
	width:10%;
}

.
Les valeurs sont arbitraires et ne servent que l'exemple.
Modifié par rodolpheb (02 Dec 2012 - 21:06)

Ça fonctionne! Merci rodolpheb. Merci beaucoup!