Un margin:auto qui sort de sa boîte

Version imprimable

Hello,

J'ai un petit problème avec un margin:auto. Pour une mise en situation, voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Mon titre</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="main"> <div id="col_log">LOG</div> <div id="col_info"> <div id="how_work">HOW</div> </div> </div> </body> </html>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 #main { width : 800px; margin : 0 auto; background : red; } #col_log { float : right; background : green; width : 250px; } #how_work { margin : 0 auto; width : 500px; background : blue; overflow : hidden; }
Je souhaite donc avoir une colonne à droite (ici en float:right) et le contenu à gauche qui prend le reste de la place disponible.

Si je mets un élément en margin:auto dans le contenu de gauche, il va se centrer par rapport à la largeur du conteneur sans se soucier de la colonne de droite (le overflow:hidden ici ne sert qu'à faire passer le div how_work devant la colonne de droite pour montrer qu'ils se chevauchent bien).

Je ne peux pas mettre mon contenu en float:left ainsi que la conne de droite également pour des raisons techniques.

Ma question est donc : Comment faire pour centrer un élément block dans mon col_info sans qu'il se centre par rapport au div main ?

:merci:

11/03/2008, 15h08
Erwan31

Salut,
je comprends pas ce qui est en gras :

Citation:

(le overflow:hidden ici ne sert qu'à faire passer le div how_work devant la colonne de droite pour montrer qu'ils se chevauchent bien).

C'est pourtant la solution non?
11/03/2008, 15h18
Bisûnûrs

Non non. Si tu enlèves l'overflow:hidden, les deux blocs se chevauchent quand même, sauf que c'est le bloc de droite qui passe au-dessus, donc on peut moins se rendre compte du problème.

J'ai donc mis un overflow:hidden sur le bloc how_work pour que ce soit lui qui passe au-dessus et qu'on se rende mieux compte qu'il est centré dans le div main et non dans le div col_info.
11/03/2008, 15h29
Erwan31

Bisunurs la largeur de main et de col info est la même (sur Firefox 3 beta et IE7)
et le div how_work n'est ni centré par rapport à main ni par rapport à col info.

EDIT Ah ok Bisunurs en effet Safari se comporte différemment à ce niveau là.
11/03/2008, 15h43
Erwan31

Si tu mets l'overflow directement sur col_info ça fonctionne. Est ce que cette situation te convient?
11/03/2008, 15h54
Bisûnûrs

Citation:

Envoyé par Erwan31

EDIT Ah ok Bisunurs en effet Safari se comporte différemment à ce niveau là.

Bizarre, c'était ce comportement que j'avais sur Firefox2 et IE7 aussi, pas que sur Safari.

Citation:

Envoyé par Erwan31

Si tu mets l'overflow directement sur col_info ça fonctionne. Est ce que cette situation te convient?

Il me semblait avoir essayé cette solution, mais apparemment non, et elle fonctionne impeccablement, merci !

Je suis tout de même surpris par ce comportement sans l'overflow ...
11/03/2008, 16h02
Candygirl

Citation:

Envoyé par Bisûnûrs

Je suis tout de même surpris par ce comportement sans l'overflow ...

Je le trouve assez logique. En l'absence d'un nouveau contexte de formatage le contenu de ton col_info se déroulerait sur le côté de ton menu puis passerait en-dessous pour occuper tout l'espace à disposition dans le #main. Il est donc assez normal que ton margin parte du #main.

Tu aurais aussi pu appliquer un margin-right à ton #col_info pour obtenir ce résultat. On voit souvent ce genre de montage, avec un centre extensible, dans le flux, positionné avec des marges de la largeur des menus latéraux flottants (perso je trouve la solution d'un nouveau contexte de formatage plus efficace).
11/03/2008, 16h02
remixxl
J'ai été trop lent ! dommage mais je le propose quand meme :

moi j'avais ca comme solution en plus de ton code:
Code:

1 2 3 4 #col_info { position: absolute; width: 550px; }
11/03/2008, 16h29
Erwan31

+1 avec les explications de CandyGirl
Attention toutefois à ne pas spécifier de marges sur l'élément en overflow:hidden/auto. Voir ces tests

@CandyGirl C'est plus effiace que les marges en effet mais il y a des situations ou une marge en pourcentage peut être plus intéressante pour la largeur d'une colonne de texte en cas de redimensionnement du viewport ou de visualisation sur de petits écrans.
11/03/2008, 17h52
Bisûnûrs

@CandyGirl : Merci pour tes explications, c'est beaucoup plus clair maintenant.
Et en effet j'ai vu beaucoup de designs avec une marge de la taille du bloc flottant.

Pour info et après tests, si on renseigne une largeur au non flottant et qu'on utilise la méthode du nouveau contexte de formatage, le Three Pixels Jog apparaît sur IE6.
11/03/2008, 18h29
Erwan31

Citation:

Envoyé par Bisûnûrs

Pour info et après tests, si on renseigne une largeur au non flottant et qu'on utilise la méthode du nouveau contexte de formatage, le Three Pixels Jog apparaît sur IE6.

Ah là là ces maudit Bug IE 6...
Pour info IE7 dépasse depuis peu IE6 en pourcentage d'utilisateurs et ça continue à grimper rapidement :)
Vivement qu'on en vienne à dire enfin "qui'IE6 est devenu trop minoritaire, j'prends plus en compte" et alors fini les three pixel jog, doubled float et Cie.
Mais IE7 n'est pas au top quand même.