[Résolu] Alignement de <div>

Bonjour,

J'ai une suite de <div> qui utilisent tous la même classe CSS. Mon but est de les aligner pour que ça ressemble à ça :

http://www.fcsion4ever.com/temp/divAlign.jpg

Pour obtenir cet alignement, j'ai simplement mis un "float:left;" dans la classe CSS des cadres.

Malheureusement dès qu'un des cadres est plus grand que les autres, tout est décalé :

http://www.fcsion4ever.com/temp/divAlign2.jpg

Comment palier à ce problème ?
Modifié par mijack (13 Jul 2005 - 07:58)

Tu as uniformisé la largeur de tes vignettes: pourquoi ne pas uniformiser plutôt leur hauteur ? De cette manière tu n'aurais pas ce bout de ligne vide.

Cyrano a écrit :
Tu as uniformisé la largeur de tes vignettes: pourquoi ne pas uniformiser plutôt leur hauteur ? De cette manière tu n'aurais pas ce bout de ligne vide.

Question de design. Toutes les vignettes avec la même hauteur ça ne ferait pas très joli (à cause des espaces vides dans certaines). Et de plus je ne peux pas connaître à l'avance la hauteur de toutes les vignettes (génération des vignettes par PHP)
Modifié par mijack (12 Jul 2005 - 19:35)

En plus du float: left;, tu dois déclarer un clear: both; sur la vignette que tu veux voir retourner à la ligne. Une autre façon de faire serait d'insérer un <br style="clear: both;"> là ou tu veux voir tes vignettes se ranger sur une autre ligne.

Stephan a écrit :
En plus du float: left;, tu dois déclarer un clear: both; sur la vignette que tu veux voir retourner à la ligne. Une autre façon de faire serait d'insérer un <br style="clear: both;"> là ou tu veux voir tes vignettes se ranger sur une autre ligne.

La façon avec clear: both sur la première image de chaque ligne marche très bien partout chez moi sauf avec IE-Mac. il casse bien le flottement avec les blocs précédents mais ajoute un clear: left en même temps. ( le grand nettoyage des blocs suivants ). Alors j'utilise simplement la façon avec br après la dernière image.
Par contre avec les retours à la ligne ( clear:both ou br ), il faut être certain du nombre de blocs par lignes et disposer d'un conteneur de largeur fixe pour les ranger, sinon c'est encore plus la pagaille.

Exactement !

Je ne peux pas utiliser un <br> puisque mon but est que le nombre de vignettes qui s'affichent dans chaque ligne ne soit pas fixe, mais varie en fonction de la largeur d'écran de l'utilisateur...

mijack a écrit :
Bonjour,

J'ai une suite de <div> qui utilisent tous la même classe CSS. Mon but est de les aligner pour que ça ressemble à ça :

...

Comment palier à ce problème ?

utilise un tableau de présentation. Tu y gagneras du temps, pour un résultat nettement plus fiable, et une accessibilité inchangée.

<edit>en renonçant à l'adaptation du nombre de vignettes par lignes à la largeur d'affichage</>
Modifié par Laurent Denis (12 Jul 2005 - 22:09)

Donc, suivant la largeur de l'écran, tu aimerais deux, trois ou cinq colonnes. Mais avec toujours les images bien rangées ? Et alignées par les sommets ?

Je rejoins alors ce que disait Cyrano il faut aussi définir la hauteur de tes blocs... Rassures-toi ils ne se verront pas.

.glob {
	float: left;
	text-align: center;
	width:142px; 
	height: 200px;
	margin:10px;
}
.bloc { 
	text-align: center;
	width: 142px;
	background: #fff;
}

D'abord deux règles simples : glob sans background pour former tes carrés qui contiendront les paragraphes bloc qui eux, formaliseront tes petites fiches avec titre/image/légende.
Pour le navigateur tout sera de même hauteur mais à l'œil ça paraîtra comme tu veux.

<div class="glob"><p class="bloc">Titre<br /><img src="gurdjieff.jpg" alt="" /><br />légende</p></div>

Le résultat des images est donné par le code que je viens d'indiquer.


Modifié par Aureance (12 Jul 2005 - 23:10)

Parfait, c'est exactement ce que je voulais. Merci Aureance. Et merci aux autres pour leurs réponses