18041 sujets

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

Margin et hauteur pourcentage - Dépassement du contener taille fixe

Bonjour à tous...

Je suis face à un problème que je ne parviens pas à résoudre malgré mes efforts...

La description littérale:
J'ai un contener en largeur 100% et hauteur auto.
A l'intérieur de ce contener, un deuxième contener à hauteur fixe, et largeur 100%.
Dans ce deuxième contener, 6 autres en float: left; avec des dimensions et marges en pourcentages.
Le but est d'obtenir, à l'intérieur de mon deuxième contener, deux lignes de 3 éléments.

Le Problème:
Les 3 derniers conteners dépassent du contener parent, malgré leurs tailles en pourcentages.
Lorsque je supprime le "float: left;", ils s'ajustent bien à cette taille.
(Pour rappel, le contener parent à des dimensions fixes, les éléments enfants en pourcentages... Ne devraient-ils donc pas calculer ces pourcentages par rapport à la taille de leur contener?)

J'ai testé les techniques décrites ici: http://www.alsacreations.com/astuce/lire/7-comment-viter-que-mes-lments-flottants-float-dpassent-de-leur-conteneurnbsp.html, mais malgré tout rien n'y fait... Peut-être que je place mon "clear" au mauvais endroit?

Ce comportement est-il explicable?
Voyez-vous le problème?

Le Code en question
Le code Html:

<section id="contener1">
   <div class="contener2">
      <article class="contener3"></article>
      <article class="contener3"></article>
      <article class="contener3"></article>
      <article class="contener3"></article>
      <article class="contener3"></article>
      <article class="contener3"></article>
   </div>
</section>

Et la Css :

#contener1 {
   width: 100%;
   height: auto;
}
#contener1 > .contener2 {
   width: 100%;
   height: 34rem;
}
#contener1 > .contener2 > .contener3 {
   width: 31.66%; /* 100% - 5% de margin / 3 éléments */
   height: 47.5%; /* 100% - 5% de margin / 2 éléments */
   margin: 2.5% 2.5% 0 0;
   float: left;
}
#contener1 > .contener2 > .contener3:nth-child(3), #contener1 > .contener2 > .contener3:nth-child(6) {
   margin-right: 0;
}


PS: Pour explication, je souhaite pouvoir changer la hauteur de mon "contener2" avec mes medias queries et que tout le contenu suivent harmonieusement...

Un grand merci d'avance pour votre aide...
Je ne m'en sort pas...!!! Smiley confus
Modifié par bastayonga (24 Jan 2013 - 00:58)
Pour info, je me suis trompé en disant que la suppression du "float: left;" corrigait le problème...
Cela ne change absolument rien... !!

Apparement, la hauteur en pourcentage des éléments n'est tout simplement pas calculée par rapport à la hauteur de l'élémént parent...

Je n'en peux plus. Smiley smile
Bonjour,

Le principal obstacle que tu rencontres est tout bête : les marges ne sont pas calculées en fonction des deux dimensions du conteneur, mais uniquement en fonction de sa largeur - les marges verticales sont donc calculées en fonction d'une valeur horizontale.

Pour te faciliter la tâche, tu peux peut-être te tourner vers display: inline-block; ou display: table-cell; - à condition que tu n'aies pas à supporter IE7.

Il y a pas mal de docs sur alsa à ce sujet ( notamment récemment un article de R. Goetter sur le modèle tabulaire en css ).

Bon courage !!
Merci beaucoup, Ten.
En effet, c'est tout bête...

Je vais donc me tourner vers d'autres techniques pour parvenir à réaliser ça...

( IE7? On verra demain. Ou après-demain. Smiley cligne )
Pour info, voilà la solution pour laquelle j'ai opté...

- Mon premier contener est en "display: table;"
- Mon deuxième contener en "display: table-row;"
- Mes articles sont en "display: table-cell;"
- J'ai inséré des div vides entre mes cellules de tableau que j'ai mis en "display:table-cell;" et avec une largeur spécifique en %.

Cette technique fonctionne, mais est vraiment méga-crade...

J'ai testé d'utiliser un ":after" sur mes articles pour remplacer ma div vide, mais cela ne fonctionne pas.

J'ai également testé de m'en sortir avec un border-spacing sur mon tableau, mais cela m'insère des marges de chaque côté de mes cellules (Je veux que ma première cellule n'ai pas de margin-left, et ma dernière pas de margin-right)... Vous voyez ce que je veux dire?

Peut-être connaissez-vous la solution adaptée?
Sujet clos
Aller à