Model à 3 colonnes avec Float
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 :
http://img356.imageshack.us/img356/1186/wrongtg9.th.png
- 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.
http://img522.imageshack.us/img522/5...rectzm3.th.png
- 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.
