Discussion :

[sbill]

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>

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;
}

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 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>

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;
}

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
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.

[Invité]

bonjour,

une solution :

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
<div id="page">
  <aside id="asideL">
    &nbsp;
  </aside>
  <section id="content">
    <div>MON CONTENU CENTRAL <br />
      sdgfsdfg sdfgsdfg sdg gsdfg sdfgsdfg dfgsd qdfqsdf qsdfqsdf qdf<br />sdgfsdfg sdfgsdfg sdg gsdfg sdfgsdfg dfgsd qdfqsdf qsdfqsdf qdf<br />sdgfsdfg sdfgssdfgsdfg dfgsd qdfqsdf qssdfgsdfg dfgsd qdfqsdf qsdfg sdg gsdfg sdfgsdfg
    dfgsd qdfqsdf qsdfqsdf qdf</div>
  </section>
 
  <aside id="asideR">
    Aside à droite<br />
    sdfgsdfg dfgsd qdfqsdf qssdfgsdfg dfgsd qdfqsdf qssdfgsdfgdfgsdfg sdg gsdfg sdfgsdfg
    dfgsd qdfqsdf qsdfqsdf qdf
  </aside>
</div>

Code css :

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
#page {
  display:flex;
}
 
#content {
  width: 980px;
}
 
#asideL,
#asideR {
  width: calc(50% - 490px);
}
 
/* déco (pour voir) */
#content {
  background: yellow;
}
#asideR {
  background: lightblue;
}

A voir : compatibilité de calc().

[sbill]

Merci pour votre réponse.

En passant par la propriété indiquer cela fonctionne bien, cependant son support risque de me poser quelques problèmes ...

Pensez-vous qu'il y a une solution sans calc ?

Merci.

[NoSmoking]

Bonjour,

cependant son support risque de me poser quelques problèmes ...

dans ce cas flex te pausera également des soucis.

[Invité]

Sinon, solution en JavaScript.

[sbill]

Bonsoir,

Merci pour vos réponses, je vais me replier si une de vos solutions

Bonne soirée.