Aligner 4 blocs

Bonjour

J'ai un petit soucis pour aligner 4 blocs dans mon containeur.
C'est tout simple mais pourtant... en fait je crois que je m'embrouille avec l'utilisation de float et inline
Quelqun peut il m'expliquer comment il faut utiliser dsiplay:inline et float: ? L'erreur viens certainement de là...
merci et bonne journée !!

.containeur {
display: block;
height: 80px;
margin: 0 0 20px 0;
}
.bloc_a {
display: inline;
float: left;
width: 200px;
height: 80px;
}
.bloc_b {
display: inline;
float: left;
width: 200px;
height: 80px;
}
.bloc_c {
display: inline;
float: left;
width: 200px;
height: 80px;
}
.bloc_d {
display: inline;
float: left;
width: 200px;
height: 80px;
}

avec le code que tu as ca devrait marcher.
le display inline est pour un conteneur unique a l'interieur du quel les elements vont etre disposés comme un texte en ligne.
un float est fait pour disposer 2 conteneurs differents l'un a coté de l'autre

jp94 a écrit :
avec le code que tu as ca devrait marcher.

Hmm pas sûr, j'ai comme un doute là.

jp94 a écrit :
le display inline est pour un conteneur unique a l'interieur du quel les elements vont etre disposés comme un texte en ligne.

Ben non, il me semble pas

Hors tableaux et autres subtilités, on a deux types d'éléments, les éléments de type bloc (div, paragraphes) et les éléments de type en-ligne (qui se comportent comme de simples caractères ou chaînes de caractères, même pour des éléments un peu "massifs" comme des images). Si on a un conteneur principal et quatre éléments enfants en display: inline, c'est comme si on avait quatre lettres à la suite. Le tout s'aligne sur la même ligne tant qu'il y a de la place (sinon, retour à la ligne).
Ensuite, il faudra peut-être régler l'alignement vertical suivant l'alignement visuel que l'on veut).

Mettre les quatre éléments en positionnement flottant est également une solution. Par contre, je déconseille de combiner les deux solutions :
1) pas sûr que ça serve à quelque chose ;
2) probable que ça pose des problèmes.

mpop a écrit :

Par contre, je déconseille de combiner les deux solutions :
1) pas sûr que ça serve à quelque chose ;

Bonjour,
Effectivement ça ne sert à rien et c'est même un non sens puisqu'avec float l'élément se comporte comme un élément de type block.

mettre display:inline dans une regle css pour un flottant ne nuit en rien et permet en cas de besoin de marge supprimer le "double-margin" d'IE sur les blocs flottants
pour l'autre partie j'ai mentionné se "comporte comme du texte" = "4 lettres a la suite" donc je ne vois pas pourquoi tu dis non.
Modifié par jp94 (07 Mar 2006 - 14:17)

jp94 a écrit :
mettre display:inline dans une regle css pour un flottant ne nuit en rien et permet en cas de besoin de marge supprimer le "double-margin" d'IE sur les blocs flottants

Effectivement :
http://www.positioniseverything.net/explorer/doubled-margin.html

jp94 a écrit :
pour l'autre partie j'ai mentionné se "comporte comme du texte" = "4 lettres a la suite" donc je ne vois pas pourquoi tu dis non.

Simple question de syntaxe :

jp94 a écrit :
le display inline est pour un conteneur unique a l'interieur du quel les elements vont etre disposés comme un texte en ligne.

Cette phrase laisse penser qu'appliquer le display inline à un conteneur unique va forcer les éléments disposés à l'intérieur à adopter un comportement d'élément en ligne.
Donc voilà, j'ai voulu corriger, même si je savais que c'était peut-être ce que tu voulais dire avec cette phrase alambiquée (syntaxiquement, l'ambiguïté est sur les "est pour"... qu'il faut alors préciser en "...est appliqué aux éléments enfants, pour obtenir un conteneur unique..." etc.)

C'est vrai que ma phrase etait peut-etre pas tres bien tournée