Discussion :

[Charlock]

Bonjour,

Mon problème est simple : je souhaite simplement center 3 blocks DIV dont je ne connais pas d'avance la taille (ou au pire je peux la fixer en %) horizontalement sur la même ligne (c'est-à-dire mg=m1=m2=md ou au moins mg=md et m1=m2).



1) J'ai résolu le problème (approximativement, mais ca me convient) avec des float:left et des marges. Seulement, sous IE, il semblerait qu'un DIV enfant d'un DIV float : xxxxx n'occupe pas 100% de la largeur comme il devrait, mais qu'il adapte sa largeur au contenu, ce qui ne me convient pas ! Et ca reste le cas même en lui spécifiant explicitement float:none, qu'il devrait d'ailleurs avoir par défaut (cf image, où le DIV parent est en noir, et le DIV fils en rouge).



Comment faire pour que le bloc rouge occupe toute la largeur ?

2) L'autre solution serait de réaliser le centrage des 3 blocks DIV sans utiliser la propriété float. Seulement je ne sais pas faire ça, mis à part avec des tableaux !

Si quelqu'un a la solution à l'un de ces deux sous-problèmes, ça m'aiderait beaucoup !
Merci !

Charles

[Atomicfryer]

Salut,
tu as essayé avec un truc genre :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

width:33%

parceque le pb pour le placement c'est qu'il faut un largeur...

[Charlock]

Oui, mais avec 33% il n'y aura pas de marges. Et même si on se débrouille pour les rajouter, les 3 DIVs ne seront pas sur la même "ligne" mais les uns en-dessous des autres !
A moins que je n'aie pas compris ce que tu voulais dire...

[Macmillenium]

Bonjour,

Oui, mais avec 33% il n'y aura pas de marges. Et même si on se débrouille pour les rajouter, les 3 DIVs ne seront pas sur la même "ligne" mais les uns en-dessous des autres !
A moins que je n'aie pas compris ce que tu voulais dire...

As-tu fait un essaie ?
Si oui, poste le code.

Les navigateurs n'interprètent pas les valeurs en % de la même manière.

[Charlock]

@ jsd03
J'ai essayé le overflow:auto; au DIV parent, celui qui est donc float:left; , mais ça ne marche pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="width:33%">

Les DIV ont bien la bonne taille (1/3 de l'écran), le DIV fils occupe bien toute la largeur, mais les 3 DIVs parents sont les uns en dessous des autres.

Et là je me rends compte que Wolfy voulait peut-être dire de rajouter le width:33% tout en gardant le float:left.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="float:left; width:33%;">

Suspense, je teste...
Wahou ! Ca semble marcher !!!
Bon bah visiblement la solution était là ;-)

Merci à vous pour vos réponses !
++
Charles

[Atomicfryer]

Et là je me rends compte que Wolfy voulait peut-être dire de rajouter le width:33% tout en gardant le float:left.

Ba voila !!! et Wolfy il va reprendre le français

[jsd03]

Bonjour,

Il me semble qu'il faille rajouter "overflow: auto;" au style du DIV parent.

[Ethyde]

Bonjour,

Pour le point 1 pourrais tu fournir le html et css ?

Pour le second c'est aussi faisable avec des positionnement (absolute et relatif) mais quelque peu plus délicat à manier que les flottants.