Centrer un élément avec un block à droite
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:
1
2
3
4
| <div id="page">
<section id="content">MON CONTENU CENTRAL</section>
<aside>Mon aside droite</aside>
</div> |
Code:
1
2
3
4
5
6
7
8
| section {
width: 980px;
max-width: 980px;
display: inline-block;
}
aside {
display: inline-block;
} |
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 ?)
2ème mise en forme :
Code:
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> |
Code:
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;
} |
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:
1
2
3
4
5
| aside {
position: absolute;
vertical-align: top;
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...
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.
