18041 sujets

Questions générales et questions de débutants

Centrer 3 div de largeur variable sans inline-block

Hello

Je me permet de poster car je suis au bord de la dépression...
Il y a pas mal de sujet en relation sur ce point mais aucun ne correspond à ce que je cherche.

Voici mon problème :

Je suis en responsive.
J'ai un footer qui doit faire la largeur de l'écran (texture en image de fond).
Dans ce footer j'ai 3 div qui doivent faire chacun 33,33% de la largeur max du centre (admettons 900px quand l'écran en fait de son coté admettons 1200) mais qui doivent rester flexibles.

1) Si possible je ne veux pas inclure ces 3 div dans un autre div conteneur. J'aime le propre.
2) Je ne veux pas utilise de inline-block par ce que je veux mes bloc les uns contre les autres et que avec cette propriété si il y a un caractère blanc entre un </div> et <div> ils ne sont plus joints et que coté php je ne peux pas intervenir.

Voici mon code html : 

<footer>
<div>contenu 1</div>
<div>contenu 2</div>
<div>contenu 3</div>
</footer>


Je ne met pas mon CSS car je viens de repartir d'une page blanche. Rien ne fonctionne....

Si une âme charitable peux m'aider et m'éviter de m'arracher les derniers cheveux qui me reste.... C'est 3h du mat et j'y suis depuis ce matin 8h + l'âpres midi de la veille.... Quand je parle de déprime... Smiley fache

Merci d'avance.
Un petit dessin pour illustrer le résultat attendu ?

C’est un peu abscons pour le moment.
Re bonjour,

J'ai supprimé le sujet sujet qui faisait doublon Smiley cligne
Pour reprendre sur Flexbox Layout module et ton besoin de rétro compatibilité, as-tu lu dans le tutoriel de Raphaël la partie "alternatives" ?
a écrit :
Il existe un outil de type polyfill en JavaScript afin d'émuler le support de Flexbox sur les anciens navigateurs tels IE6-IE9 et Opera 10. Il s'agit de Flexie.js. Vous pouvez le tester sur Flexie Playground. Sachez cependant que cette alternative JavaScript ne semble plus mise à jour depuis une bonne année et se base sur la syntaxe désuette de 2009.

Il existe peut-être d'autres polyfill si celui-ci ne convient pas ?

Qu'est-ce qui pose problème avec inline-block / inline ? Il existe quelques solutions pour ce problème d'espace Smiley cligne
J'ai pas trouvé de poly qui soient très ragoutante !

Oui le problème c'est cette histoire d'espace entre les div et que je ne souhaite pas forcer un texte à 0px.
Tu as une autre idée ?

Comment font les sites en responsive pour ce genre de cas car j'ai l'impression que c'est le même problème non ?
Si inline-block ne convient pas , alors il y a aussi table/table-cell, compatible depuis Ie8.

avec 2 pseudo et un table-layout:fixed; le probleme peut-être réglé en ayant 3 cellule de 300px centrées et de mêmes hauteur.

CSS basée sur ton morceau HTML . Demo en ligne: http://codepen.io/anon/pen/iLJsD
footer {
  display:table;
  width:100%;
  height:50px; /* au pif, laisser le contenu faire */
  background:#BF2D2A;
  table-layout:fixed;
}
 footer:before, footer:after {
content:'';
   width:100%;
 }
footer div, footer:before, footer:after {
  display:table-cell;
}
footer>div {
  background:#1F3AC8;
  width:300px;
  border:1px solid;
}
C'est un peu prêt ce que je veux en effet mais je veux aussi que les 3 div puissent être un minimum flexibles si l'écran tombe en dessous des 900px.

Y a t'il une petite adaptation possible ?
Sujet clos
Aller à