Bonjour,
Je galère sur une mise en page, mon but est d'obtenir une section de contenu centrer de largeur 980px, à ça droite un aside qui prend la place qui lui reste.
Cependant le centrage me pose des problème afin de bien positionner le menu de droite, j'ai tester plusieurs choses :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 <div id="page"> <section id="content">MON CONTENU CENTRAL</section> <aside>Mon aside droite</aside> </div>
Je ne peux pas utiliser "margin: auto;" sur ma section à cause de son passage en "inline-block", j'ai donc essayez d'ajouter un élément parent afin de lui appliquer un "text-align: center; " (moche ?)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 section { width: 980px; max-width: 980px; display: inline-block; } aside { display: inline-block; }
2ème mise en forme :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <div id="page"> <div id="parent"> <section id="content">MON CONTENU CENTRAL</section> <aside>Mon aside droite</aside> </div> </div>
Ma section ce "centre" pas comme il faut à cause du block aside, je lui applique donc un position: absolute afin de le faire sortir du flux :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 #parent { text-align: center; } section { with: 980px; max-width: 980px; text-align: left; display: inline-block; }
Le résultat est casiment celui attendu, à savoir ma section est centré et mon aside est à droite, cependant je trouve cela un peu tirer par les cheveux qu'en pensez-vous ? L'inconvénient est que "aside" ne prend pas toute la largeur disponible à cause de ça sortie du flux...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 aside { position: absolute; vertical-align: top; display: inline-block; }
J'évite d'utiliser la propriété float pour le placement du contenu de la page, cependant lors de mes tests j'ai obtenu un comportement similaire au problème ci-dessus.
Merci pour votre aide.
Partager