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 ?