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>Je souhaite donc avoir une colonne à droite (ici en float:right) et le contenu à gauche qui prend le reste de la place disponible.
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; }
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 ?
Partager