Un margin:auto qui sort de sa boîte

**Bisûnûrs** · 11/03/2008, 14h19

Hello,

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

Code html :

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

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 :

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

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 ?

**Erwan31** · 11/03/2008, 15h08

Salut,
je comprends pas ce qui est en gras :

(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?

**Bisûnûrs** · 11/03/2008, 15h18

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.

**Erwan31** · 11/03/2008, 15h29

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à.

**Erwan31** · 11/03/2008, 15h43

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

**Bisûnûrs** · 11/03/2008, 15h54

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.

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 ...

**remixxl** · 11/03/2008, 16h02

J'ai été trop lent ! dommage mais je le propose quand meme :

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

Code :

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

1
2
3
4
#col_info {
	position: absolute;
	width: 550px;
}

Un margin:auto qui sort de sa boîte

CSS

Vue hybride

Discussions similaires

Partager

Partager