Centrer deux div en milieu d'un div
Résolu
Bonjour,
c'est la première fois que je teste des div et j'ai un petit problème :
dans page html:
j'ai 3 div, le premier div global englobe deux div a1 et a2 et ils sont à côtés de l'autre, j'ai utilisé deux fichiers html et l'autre css.
voici le code html:
et le css:
le probleme en utilisant ce code, les 2 div a1 et a2 ne se centrent pas meme si j'ai mis dans div global text-align:center
merci d'avance
c'est la première fois que je teste des div et j'ai un petit problème :
dans page html:
j'ai 3 div, le premier div global englobe deux div a1 et a2 et ils sont à côtés de l'autre, j'ai utilisé deux fichiers html et l'autre css.
voici le code html:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> <link rel="stylesheet" href="s.css" type="text/css"/> </head> <body> <div id="global"> <div id="a1"></div> <div id="a2"></div> </div> </body> </html>
et le css:
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#global
{
background-color:#CCCCCC;
width:100%;
height:100px;
text-align:center;
}
#a1
{
background-color:#0099FF;
height:100px;
width:200px;
float:left;
}
#a2
{
background-color:#009900;
height:100px;
width:400px;
float:left;
}
le probleme en utilisant ce code, les 2 div a1 et a2 ne se centrent pas meme si j'ai mis dans div global text-align:center
merci d'avance
Configuration: Windows XP Firefox 3.0
8 réponses
-
Et si tu crées une div englobement qui englobe a1 et a2, que tu specifie de width:600px et de margin:auto
Bien sur tu conserve float:left pour a1 et a2 .
Comme ça a1 et a2 seront collés et la div "englobement" sera centré !
Je c'est pas si j'ai été clair la !
Si tu comprends pas dit le moi et je mettrais le code.
Toto.-
Contributeuroui, c'est à ça que je pensais sachant que tu peux économiser le <div> englobant en mettant {margin:0 auto;} à <body>.
-
@DalidaEffectivemment sa lui evite la <div> : #global ... si j'ai bien compris ;-)
-
-
Contributeuren fait on se complique la vie pour pas grand chose !
regarde cet exemple.
-
Si c'est la div "global" que tu veut centrer essaye : margin:auto
Tiens nous au courant. -
non ça ne fonctione pas margin: auto
la largeur de a1 est de 200px
la largeur de a2 est de 400px
vous avez raison à propos du flotement à gauche, mais je veux que div a1 et a2 reste à côté de l'autre et centré aussi... -
Contributeurnon, s'il y a un flottement ça ne prendra pas.
essaie plutôt de centrer le <div> global et d'aligner les <div> contenus en changeant leur rendu.body { margin:0 auto; } #global { } #a1 { width:200px; display:inline; } #a2 { height:100px; width:400px; display:inline; }
<edit>
pas la peine d'essayer ça ne prendra pas la largeur fixe.
sais-tu déjà quel contenu tu auras ?
une liste de liens à gauche je suppose ?
</edit>
-
dsl j n'étais pa la à cause de ma connexion
oui ça marche.... merci beaucoup!!!!!!!!!!!! ;) -
Effectivement ça fait beaucoup de div mais je crois que c'est la seule solution !
Ravis de t'avoir aidé. A bientôt sur CCM Dalida et liyou ! ;-) -
Contributeursalut,
ils ne peuvent pas être centrés puisqu'ils flottent à gauche.
peux-tu définir la largeur ?
