[Résolu]Alignement horizontal de deux blocks

Bonjour à tous,

Tout d'abord, je tiens à remercier la fine équipe qui traite des divers problèmes dus au css, j'ai dans un premier temps parcourus les forums à la recherche d'un problème similaire au miens, et je suis agréablement surpris de la disponibilité et de la bonne humeur qui règnent.

Je vous expose donc mon problème, suite à plusieurs recherches à travers la toile et plus précisément sur ces forums, je prends bien conscience qu'il est similaire à d'autres problèmes mais j'ai pourtant essayé d'employer plusieurs méthodes solutions, rien n'à y faire, ça coince.

En fait, je réalise un site bénévolement pour un artiste qui diffuse sa musique librement sur la toile, actuellement j'en suis à traiter dynamiquement la gestion des albums, avec une présentation des groupes dans lesquels il oeuvre, et dans chaque groupe je voudrais alligner les albums avec la jaquette, le nom et la date de parution.

Le seul problème, c'est que chaque album est inclus dans un bloc, un div ici, en l'occurence, et que j'ai beaucoup de mal à les alligner horizontalement.

Pour m'exprimer concrètement, voici la partie xhtml/php:

<?php
	if(!isset($_GET['album']))
	{
		$reponse = mysql_query("SELECT g.*, a.* FROM groupes g LEFT JOIN alboums a ON(g.id_groupe = a.groupe_alboums) GROUP BY a.groupe_alboums") or die(mysql_error());
		while ($donnees = mysql_fetch_array($reponse))
		{
			
			echo '
			<div class="toutmx_groupe">
				<div class="toutmx_groupe_titre">
					<a href="./toutmx-groupe-'.$donnees['groupe_alboums'].'.tmx">'.$donnees['nom_groupe'].'</a>
				</div>';
			
			$reponse2 = mysql_query("SELECT * FROM alboums WHERE groupe_alboums='".$donnees['groupe_alboums']."'") or die(mysql_error());
			while ($donnees2 = mysql_fetch_array($reponse2))
			{
				echo '
				<div class="toutmx_albums">
					<img src="./albums/'.$donnees2['image_alboums'].'" alt=""/><br />'.$donnees2['nom_alboums'].'<br />
				</div> ';
			}
			
			echo '
			</div>';
			
		}
	}
?>

Actuellement, avec les données de test, j'obtiens un résultat comme celui-ci:

<div class="toutmx_groupe">
	<div class="toutmx_groupe_titre">
		<a href="./toutmx-groupe-1.tmx">David TMX</a>
	</div>
	<div class="toutmx_albums">
	        <img src="./albums/1.jpg" alt=""/><br />
               3 FURIOUS CHRISTMAS DAYS<br />
	</div> 
	<div class="toutmx_albums">
		<img src="./albums/2.jpg" alt=""/><br />
               argh<br />
	</div> 
</div>
<div class="toutmx_groupe">
	<div class="toutmx_groupe_titre">
		<a href="./toutmx-groupe-2.tmx">Mortad'hell</a>
	</div>
	<div class="toutmx_albums">
		<img src="./albums/8.jpg" alt=""/><br />
               there's a satanic butcher in everyone of us<br />
	</div> 
</div>

Et j'emplois le css suivant:

.toutmx_groupe {
	padding: 10px;
	margin-bottom: 15px;
	border: 2px solid green;
}
.toutmx_groupe_titre {
	border-bottom: 1px solid black;
	font-size: 16px;
}
.toutmx_albums {
	border: 2px solid red;
}

J'obtiens donc ce résultat:

http://www.sdt-fondation.com/TMX/Image%201%20petit.png

Après, pour l'allignement horizontal, j'ajoute un float: left; à .toutmx_albums, seulement j'obtiens le résultat suivant:

http://www.sdt-fondation.com/TMX/Image%203%20petit.png

J'ai essayé de changer le div avec class .toutmx_albums en liste, ça a été concluant mais il persistait de gros problèmes de décallage, notemment dus aux noms des albums qui dépassaient deux lignes.

Je m'en remets donc à vous, dans l'espoir de trouver un remède à ce problème, et vous remercie d'avance.
Modifié par mota (07 May 2006 - 13:51)

Hello mota,

Salue David pour moi ! Entre trappeurs, on se croise rarement, surtout depuis la chute du cours du castor. J'ai appris que depuis David posait en short moulant kitch sur des pochettes d'albums.

Bon allez, pour les quelques lecteurs qui passent, si vous voulez écouter du DavidTMX c'est par ici :
http://www.jamendo.com/fr/artist/david.tmx/

Bon, maintenant passons au choses sérieuses.

Déjà, pour des blocs flottants, tu aurais intérêt à leur donner une largeur fixe. Comme ça, si le texte dépasse, il se placera sur plusieurs lignes, mais toujours en dessous de l'image de la pochette. Si toutes les pochettes font 150px de large, tu mets un width: 150px; sur ton conteneur (div de classe "toutmx_albums").

Tout met maintenant le tout en float left ou right, comme tu le sens. Et pour corriger le dépassement des flottants (qui ne sont pas appelés flottants pour rien !), tu suis le tuto suivant :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

mota a écrit :
Tout d'abord, je tiens à remercier la fine équipe qui traite des divers problèmes dus au css, j'ai dans un premier temps parcourus les forums à la recherche d'un problème similaire au miens, et je suis agréablement surpris de la disponibilité et de la bonne humeur qui règnent.

Hé hé, on est des as !
Bienvenue à bord !

Eh bien merci de la rapidité.

Pour le moment je ne peux pas tester cette solution puisque je ne suis pas sur mon post de développement donc je donnerai des nouvelles du problème ce week-end.

Sinon, je saluerai David volontier, mais sâche à présent qu'il ne pose plus en short moulant, il est retourné torse-poil dans sa thoundra pour méditer sur un siècle très cellulosé.

En tout cas ça fait plaisir de voir un amateur de cet étrange énergumène, c'est si rare
Modifié par mota (02 May 2006 - 14:23)

Eh bien je viens de tester, merci bien.

C'est très concluant avec un spacer, je suis interloqué de cet effet, en tout cas merci beaucoup.