Discussion :

[E.Fahd]

Salam,

- Voila un problème que j'ai depuis la nuit des temps et que je contourne toujours avec des petits work-around mais bon, il va bien falloir que je trouves une solution "clean" un jour, alors je demandes votre aide. Voila le problème :

1) J'ai un grand bloc "canvas" positionné en absolu. Il est centré horizontalement, la largeur est fixée en pixels, enfin tout ce qu'il y a de plus courant.

2) A l'intérieur de "canvas" j'ai un bloc "slogan" (il ne nous intéresse pas ici) et puis un bloc "site". Alors le bloc "site" a un background-image qui est en fait un dégradé.

3) Le bloc "site" contient deux blocs "en-tete" et "navigation" (ils ne nous intéressent pas) et finalement un bloc "layout", c'est ce bloc qui va poser touts les problèmes.

4) Le bloc layout doit normalement contenir 3 blocs sous formes de colonnes juxtaposés. Mais sous certaines contraintes : D'abord il ne doit pas être de hauteur fixe, ensuite il doit partager le même arrière plan que "corps".

- La seule et unique façon, à ma connaissance, pour éviter de devoir spécifier la hauteur de "layout" c'est de positionner les blocs colonnes avec float. Mais le problème c'est que dès que je les positionne avec float, ils "sortent" de layout. Une illustration vaut mieux que toutes les explications :



- Comme vous voyez ici, dans l'arborescence DOM, "site" contient bien "layout" qui à son tour contient les deux colonnes. Mais le contour dans la prévisualisation met en évidence le fait que dès que je mets les colonnes en flottant, celles-ci "sortent" de leur conteneur.



- Ici j'ai fixé la hauteur de "site". Normalement c'est comme ça que ça devrait être affiché sauf que, évidement, je ne veux pas avoir une hauteur fixe. Il faut bien noter que l'arrière-plan "parcoure" toute la page. Si ça n'avait pas été le cas, j'aurais pu mettre en place d'autres façons pour arranger les deux colonnes et obtenir un bon résultat mais là il faut que le background reste le même sur toute la page.

- Voila, j'espère que j'ai été clair. Merci pour toute réponse.

PS : Pour contourner le problème, j'avais l'habitude d'ajouter un div invisible avec un texte aléatoire en bas de "site" et de mettre l'attribut "clear" des colonnes flottantes sur both. Mais c'est du bricolage.

[Candygirl]

Bonjour,

1) J'ai un grand bloc "canvas" positionné en absolu. Il est centré horizontalement, la largeur est fixée en pixels, enfin tout ce qu'il y a de plus courant.

Pourquoi l'avoir positionné en absolu plutôt que d'utiliser un margin:0 auto; ?

Mais le problème c'est que dès que je les positionne avec float, ils "sortent" de layout. Une illustration vaut mieux que toutes les explications :

Le contenu des flottants n'est pas pris en compte par le conteneur car il s'écoule hors du flux principal.

PS : Pour contourner le problème, j'avais l'habitude d'ajouter un div invisible avec un texte aléatoire en bas de "site" et de mettre l'attribut "clear" des colonnes flottantes sur both. Mais c'est du bricolage.

Bricolage, oui et non.

Il n'existe pas actuellement de solution vraiment "propre" à cette problématique. css 3 devrait y remédier.

En attendant, une solution simple pour éviter de recourir à l'ajout de code html et d'attribuer au conteneur une propriété étabissant un nouveau contexte de formatage. Par exemple overflow: hidden ou auto

[E.Fahd]

Salam,

- Merci Candygirl pour l'overflow, ça ne m'avait pas traversé l'esprit et pourtant c'est déjà une meilleure solution Par contre, plus de précisions sur ce que prévoit CSS3 concernant la gestion des flux ? Je ne me rappelle pas avoir lu des spécifications traitant de cette problématique. Un lien peut-être ?

Merci encore.

[Candygirl]

Dans le working draft de 2002 du model de boîte on trouve une trace de la propriété clear-after.
Il est vrai que cette dernière n'apparait pas dans le dernier brouillon du w3c concernant le model de boîte basique (2007) mais il est probable que le cas soit traité dans le chapitre CSS Extended Box Model pas encore publié à ce jour... (?)

[E.Fahd]

Salam,

- Ah d'accord Candygirl. C'est vrai qu'un clear-after serait le bienvenu dans des cas pareils. Merci pour le lien