Alignements d'images et renvoie à la ligne

Bonjour,

Il y a quelques temps j'ai utilisé pour mon portail un style fourni par Alsacréations, dont je remercie les auteurs.

Aujourd'hui, je tente de mettre en place une banque de données accessibles aux internautes sur le thème de mon site. On sélectionne une famille qui renvoie vers la liste des éléments peuplant cette famille. Rien de très compliqué. Mon plus gros problème se pose dans la feuille de style.

La page web en question : www.deutz-passion.fr/fiches (et ce qui en découle).

J'ai un div central dans lequel j'ai un autre div principal qui contient lui-même le div que j'ai appelé "bcc" afin d'aligner mes images :

/* Bloc central */
#centre {
	position: relative; /* Voir -> Note 1 */
	width: 100%;
}

#principal {
	margin-left: 200px; /* -> 2 */
	margin-right: 240px; /* -> 2 */
	padding: 10px 20px;
}

#bcc p{
	margin: 10px 10px 10px 10px;
	padding:0;
	float:left;
	text-align:center;
	width:150px;
}

#bcc p img {
	border:0;
	width: 80px;
	height: 80px
}

J'intègre mes images de la sorte (exemple pour les familles) :

print("<div id='bcc'>");
while($row=mysql_fetch_assoc($resultat_famille)) {
	$img = $_SERVER{'DOCUMENT_ROOT'} . $row['image'];
	print ("<p><a href='http://".$_SERVER['SERVER_NAME']."/fiches/".urlencode($row['nom'])."' title='".$row['nom']."' alt='".$row['nom']."'>");
	print ("<img src='http://".$_SERVER['SERVER_NAME']."".$row['image']."' title='".$row["nom"]."' alt='".$row["nom"]."' />");
	print ("<br />".$row["nom"]."</a></p>");
}
print("</div>");

Mon problème, enfin mon souhait, serait que mon div principal s'agrandisse d'autant qu'il y a d'espace occupé par les images, même si selon lui tout est sur une ligne!
J'ai essayé de tricher en rajouter du blanc, des sauts de ligne, rien n'y fait ...

Je suis tout ouï quant à vos remarques et suggestions pour m'orienter vers la solution !

Merci par avance,

Charles

Bonjour,

Mon problème n'intéresse personne ? C'est si bête que ça ?

salut,
je crois que c'est à cause des flottants. Tu pourrais te simplifier la vie ne utilisant un simple "display:inline-block". Le problème pourrait se résoudre en ajoutant un "overflow:hidden" au conteneur mais cela entraînerait un autre problème.

Bonjour,

Je remonte mon sujet, étant pas mal pris ces derniers temps, je n'ai pas pu me concentrer sur le sujet.

J'ai donc appliqué la correction suggérée, le résultat s'améliore mais tout est aligné verticalement et centré sur la gauche.

Avant

#bcc p{
	margin: 10px 10px 10px 10px;
	padding:0;
	[b]float:left;[/b]
	text-align:center;
	width:150px;
}

Après :

#bcc p{
	margin: 10px 10px 10px 10px;
	padding:0;
	[b]display:inline-block[/b]
	text-align:center;
	width:150px;
}

Qu'en penses-vous ?