Discussion :

[Décibel]

Bonjour,

Je cherche à faire 3 colonnes en milieu d'écran...
La principale est au centre avec un width de 950px qui ne bouge pas quelque que soit l'écran.
Les deux autres de chaque coté s'ouvrent en fonction de l'écran et prennent toute la place qui reste.
Mon problème c'est que la colonne principale n'est jamais centrée, elle se balade de droite et de gauche...

Bien sur si mon écran fait moins de xx px tout sera recadré en responsive...

Merci de votre aide !

[black-hawk-down]

Salut,

Si t'es pas trop regardant sur la compatibilité navigateur, tu peux regarder du côté du module flex.

Pour des exemples plus parlant tu as ces deux liens :

• http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://synbioz.developpez.com/tutori...-page-flexbox/ (moins complet mais en français)

[CCyrillus]

Bonjour/bonsoir,

tu peut aussi te baser sur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

calc()

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

float

, moins performant que flex pour le réarrangement automatique/responsive de l'architecture, il te faudra en passer par les mediaquerie et une architecture spécifique.
http://codepen.io/gc-nomade/pen/pvVxBZ

[Décibel]

Merci CCyrillus, mais ce que tu as écris ressemble pour moi à un bug informatique qu'à une aide...
Peux tu en dire un peu plus...
Ou mieux faire un petit exemple...

Merci !

[Décibel]

Je viens de voir la fonction calc()
https://developer.mozilla.org/fr/docs/Web/CSS/calc
Trop bien, je ne l'a connaissais pas !!
Je vais essayer et revenir ici pour clore la discussion si je trouve comment faire...

[Décibel]

Bon en cherchant j'ai trouvé...


Voila ma 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
<div style="width:100%;overflow:hidden;text-align:center">
	<div style="display:table">
        <div style="display:table-cell;background-color:#099;vertical-align:top">
            <p>votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte </p>
        </div>
 
    <div style="width:920px !important;display:table-cell;background-color:#F99;vertical-align:top;padding:40px">
               <p>votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte </p>    
        </div>
 
        <div style="display:table-cell;background-color:#099;vertical-align:top">
             <p>votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte votre texte </p>
        </div>
  </div>  
</div>

Le div du milieu reste à 920px et les 2 div de coté se transforment en fonction de la taille de l'écran et surtout le div du milieu reste centré !!
Mais il faut le même contenu à droite et à gauche....

Quelqu'un aurait il mieux à proposer ou améliorer la chose....

[NoSmoking]

Bonjour,
tu pourrais également regarder du coté de display:flex suivant les navigateurs que tu vises.

D'ailleurs c'est ce que t'a proposé également black-hawk-down.

[Décibel]

Et pourquoi tu n'en parles pas directement ?

[black-hawk-down]

Parce qu'il faut que tu apprennes par toi-même. Je pense que les exemples fournis devraient suffire à la compréhension du module Flex.

Maintenant, nous ne rechignons pas à t'aider sur du code existant si tu n'arrives pas à tes fins.