Tutoriel : Initiation au positionnement CSS

Bonjour,

J'ai lu avec beaucoup d'intérêt le tutoriel suivant :
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html

S'agissant du paragraphe "Mise en page centrée en 2 colonnes, header et pied de page",
et en particulier du cas où les hauteurs sont imprévisibles pour les div #sidebar et #contenu, l'auteur de l'article s'en sort en plaçant ces deux divs dans un div "père" nommé #wrap et, coté CSS, par #wrap {overflow:hidden;}, et là, je bloque ! C'est à dire que je ne comprends pas pourquoi ça marche ???

Je fais forcément erreur quelque part, mais pour moi, un overflow:hidden n'est pas supposé faire autre chose que d'empêcher que le contenu "déborde" s'il s'avère que ledit contenu est trop grand pour son conteneur ! D'ailleurs, sauf erreur, #sidebar ne fait pas partie du contenu de #wrap ? Puisque #sidebar est float;left, il est "hors flux" ? Donc, le contenu en question se limite à la balise div #contenu

? Bref, si vous donnez à #sidebar un plus long contenu qu'à #contenu, vous constaterez que #wrap s'étire bien en hauteur jusqu'à "englober" entièrement #sidebar ?

Bref, je ne vois pas du tout le rapport entre la signification que je prête à overflow:hidden, et le résultat obtenu...

Et puisque je n'aime guère ré-utiliser une technique sans la maitriser, je continuerai à obtenir le même effet avec un "spacer", autrement dit un div supplémentaire avec style = clear ; both

Cela dit, j'aimerais bien mieux encore comprendre cet overflow : hidden !

Bref, si une bonne âme pouvait expliquer clairement le pourquoi du comment...?

MERCI !

Bonjour,

Isidore a écrit :
pour moi, un overflow:hidden n'est pas supposé faire autre chose que d'empêcher que le contenu "déborde" s'il s'avère que ledit contenu est trop grand pour son conteneur !

C'est son effet premier. Il y en a un deuxième, qui est la génération d'un contexte de formatage de bloc.

Isidore a écrit :
D'ailleurs, sauf erreur, #sidebar ne fait pas partie du contenu de #wrap ?

Qu'il soit en dehors du flux ou pas (ce qui demanderait quelques précisions, le «en-dehors du flux» du positionnement absolu n'étant pas identique au «en-dehors du flux» des éléments flottants ), #sidebar est bien un enfant de #wrap.

Isidore a écrit :
Donc, le contenu en question se limite à la balise div #contenu

Non, le contenu correspond au contenu. (Amis tautologues, bonsoir.)
Qu'un contenu ne soit pas pris en compte dans le calcul de la hauteur de son parent, c'est une chose; ça reste un contenu.

Isidore a écrit :
si vous donnez à #sidebar un plus long contenu qu'à #contenu, vous constaterez que #wrap s'étire bien en hauteur jusqu'à "englober" entièrement #sidebar ?

C'est l'effet souhaité, et on l'obtient grâce au contexte de formatage dû au overflow: hidden.

Voir les trois premiers liens ici:
http://www.google.fr/search?q=contexte+de+formatage

Bonjour,

Merci pour votre réponse !

Si je vous comprends bien, et si je comprends bien les explications données ici : http://www.w3.org/TR/CSS21/visuren.html#block-formatting :

1/ le overflow: hidden permet de créer un contexte de formatage (pour #wrap dans le cas présent)

2/ Ce contexte de formatage entraine que la totalité du bord gauche de chaque boite (=div?) "touche" le bord gauche de son conteneur

3/ Le point 2/ reste vrai même en cas de div flottant

4/ Les points 2/ et 3/ impliquent que la hauteur d'un div flottant sera néanmoins prise en compte dans la hauteur finale du conteneur, et qu'à ce "détail" près le "rendu" reste celui d'un float

Si cela est juste, et si vous connaissez une façon plus simple de résumer la chose, je suis preneur

Je retiens de ces questions autour du "overflow:hidden", que les spécifications du W3c sont parfois subtiles, sinon franchement tirées par les cheveux... Non ?

Ce soit être un sacré boulot d'écrire un navigateur conforme !!!

Isidore a écrit :
Je retiens de ces questions autour du "overflow:hidden", que les spécifications du W3c sont parfois subtiles, sinon franchement tirées par les cheveux... Non ?

Ça dépend des cas. Et ça dépend en partie de si on parle de HTML 4 + CSS 2.1, ou de HTML 5 + CSS 3.

Historiquement, les rédacteurs des spécifications telles que HTML 4 et CSS 2 (tous ont près de dix ans d'âge) écrivaient à la fois pour les éditeurs de navigateurs et pour les développeurs web. Le résultat est le suivant:

1. Des spécifications plutôt lisibles et compréhensibles pour le développeur web expert, un peu plus ardues peut-être pour le non-expert, et très peu compréhensibles pour le webdesigner qui fuit le code et les considérations techniques.
2. Des spécifications parfois trop imprécises (car pas assez techniquement détaillées) pour les éditeurs de navigateurs, qui se retrouvaient à devoir interpréter la spécification à leur sauce pour pouvoir l'implémenter.

Avec HTML 5 et CSS 3 (en cours de rédaction), l'orientation est la suivante: il s'agit de spécifications à l'intention a) des éditeurs de navigateurs et b) des développeurs web experts. Ces derniers sont censés assimiler les subtilité techniques, et présenter ces futures normes de manière compréhensible (mais forcément limitée) à travers des supports de formation: cours, articles, tutoriels, livres, etc.

Voilà pour le pourquoi du comment.

Et comme je suis un développeur web expert (enfin, intégrateur web expert, mais passons), voici une petite explication de l'impact du contexte de formatage sur les flottants.

Flottants et contexte de formatage

1. Par défaut, un élément de type bloc (par exemple un DIV, un P, ou encore un SPAN en display:block) sera «perméable aux flottants». Il y a deux cas de figure principaux:

1.a) Un flottant est placé, dans le code HTML, avant le bloc. Ce flottant va survoler le bloc sans le repousser, comme on peut le voir dans les différents exemples suivants.

2.b) Un flottant est placé, dans le code HTML, à l'intérieur du bloc. Ce flottant ne va pas repousser les limites du bloc, c'est à dire qu'il va dépasser du bloc s'il est plus haut que le bloc lui-même. Dans les cas où tous les enfants d'un bloc sont flottants, le bloc lui-même peut se retrouver à avoir une hauteur de zéro pixels.

2. Si notre bloc crée un contexte de formatage, c'est à dire plus concrètement s'il utilise la propriété overflow avec les valeurs "scroll", "hidden" ou "auto", il réagira différemment aux flottants. Le bloc devient «imperméable aux flottants». Nos deux cas de figures sont modifiés:

2.a) Si un bloc qui crée un contexte de formatage est précédé d'un flottant et que ce flottant vient «toucher» le bloc, le bloc sera repoussé par le flottant. Concrètement, cela signifie que le bloc adaptera sa largeur pour se placer à côté du flottant, ou s'il ne peut pas adapter sa largeur il se placera en-dessous du flottant.

2.b) Si un bloc qui crée un contexte de formatage contient des flottants, ces flottants ne pourront pas dépasser du bloc, et la hauteur du bloc s'adaptera à la hauteur de tous les contenus, flottants y compris.

Voilà pour l'essentiel. Ce serait plus clair avec un exemple visuel pour chaque cas de figure, mais je n'ai pas trop le temps de les préparer.

Un peu tardivement, mais mieux vaut tard que jamais, un grand meric pour vos explications, très claires, nul besoin d'un exemple visuel

Encore merci !

Qu'il est fort ce Florent

@Isidore : Cela signifie peut-être que ce sujet "pourrait éventuellement" recevoir le tag [résolu]

Cdt,
Sylvain