Bonsoir,

Pour résumer, j'ai un problème de <div>, de display:float; et de conteneur.

Pour visualiser le problème, visitez http://www.wir3d.net/sites/float/index01.html

sur l'index 01, les blocs problématiques (bordures grises) n'ont pas de float. Du coup, il ne sont pas alignés horizontalement (ce que je souhaite obtenir au final).

sur l'index 02, seuls les blocs ont un float:left. Ils sont alignés, génial, mais du coup, leur conteneur, le <div class="homeMenu"> (bordure noire) ne les contient plus. C'est à dire qu'il ne descend pas en dessous des blocs, pour les englober.

sur l'index 03, les blocs et le conteneur ont un float:left. Le conteneur les contient, génial. Mais du coup, c'est le conteneur du conteneur (<div class="main">) qui bug, il ne "contient" plus son enfant. En gros, même problème que sur l'index 02, mais au niveau supérieur de l'architecture HTML.

et sur l'index 04, les blocs, le conteneur, et le conteneur du conteneur se "contiennent", mais l'affichage du footer bug. Si je place également un float:left sur le footer, il revient en bas.

Ce que j'aimerai, c'est arriver à aligner mes blocs gris, sans placer un float:left sur chacun des éléments parent, car je trouve pas cette méthode super, et tout en gardant une structure en <div> (pas de <table>).

Avec un display:inline-block; sur les blocs gris, ça marche, mais seulement sous FF.

Existe t'il une solution ?

Je comprends pas ce que tu veux faire, serait-il possible de faire un croquis au bloc-note pour illustrer ce que tu veux obtenir ?

Ce qu'il faut comprendre des techniques de positionnement, c'est qu'un bloc positionné sort du flux normal des éléments. Essaye d'éclaircir un peu ton propos par rapport à ça, ça nous dnonera peut-être une chance de t'indiquer le bon chemin vers la solution...

En gros, je voudrai arriver à ce résultat : http://www.wir3d.net/sites/float/index.html
( CSS ici : http://www.wir3d.net/sites/float/styles.html )

- sans utiliser de float:left sur les bloc rouges (car si je met un float:left sur les blocs rouges, il faut que je le mette sur la totalité des blocs qui suivent (bloc vert) et sur leurs conteneurs (bloc jaune et bloc gris).
- sans utiliser de tableaux (donc garder un système de <div>)
- que cela soit identique sur FF et IE

Question à 2 balles : à quoi te sert de mettre le bloc homemenu en flottant ? C'est un élément normal de la page.

Et bien tout le problème est là : Si j'enlève le float de ce bloc, voici ce que ça donne : http://www.wir3d.net/sites/float/index.html

il ne contient plus ses blocs enfants. Parce que ses blocs enfants eux gardent le float, et donc sortent de leur conteneur. Il faudrait alors que j'enlève le float des blocs rouges également, mais dans ce cas, ils ne sont plus alignés horizontalement

C'est un menu : rien ne t'interdit d'en fixer la hauteur

Effectivement, sur cet exemple, le bloc homeMenu est un conteneur de menu, mais qui va contenir un nombre inconnus d'items. Donc je voudrais éviter de modifier sa hauteur à chaque fois que le nombre d'items est modifié, pour qu'il contiennent visuellement ses fils. Car à partir de 5 éléments, cela va crée une deuxième ligne.

De plus, j'ai l'impression que ce n'est pas très propre niveau codage, ça ressemble à un pansement, pour essayer de cacher que le CSS est mal fait. En théorie, un conteneur devrait grandir et rétrécir automatiquement en fonction de ce qu'il contient non ?

Donc le problème n'est pas la hauteur de ce bloc mais la position qui va en découler pour ce qui suivra avant le pied de page, c'est bien ça ?

Mon problème est de réussir à aligner horizontalement mes blocs rouges (et à les faire aller à la ligne, si ils dépassent la largeur du conteneur), en gardant une architecture conteneurs/contenants cohérente (un conteneur doit englober ses contenants, quelques soit leurs nombres et leurs hauteurs).

J'ai l'impression qu'il n'y a que 2 solutions envisageables :
- Créer une table, pour les blocs rouges, ou chaque bloc est une cellule de tableau.
- Mettre des float:left pour corriger les problèmes de conteneurs qui ne contiennent plus visuellement leur contenants.

Mets tes blocs de menu en flottant et pour être certain que le bloc qui suit le menu sera positionné après le menu, ajoute-lui un "clear: both" et il se mettra bien en dessous du menu quelle que soit la hauteur de celui-ci.

A visualiser sur : http://www.wir3d.net/sites/float/index.html

Ca ça marche, pas de problème.

Mais mon conteneur de menu (en jaune) ne contient toujours pas mes bloc rouges : /

Met un "height: 40px;" dans ta classe .homemenu

Met un "height: 40px;" dans ta classe .homemenu

Il y a mieux : Et pour IE 6, ajouter, dans une feuille de style supplémentaire appelée au moyen d'un commentaire conditionnel :

Non, vous n'y êtes pas. VaN voudrait que la hauteur du bloc (jaune) contenant les blocs de lien (rouges) adapte sa hauteur au contenu.

Le problème est que ces blocs de liens sont sortis du flux à cause du positionnement flottant. La hauteur du bloc "homemenu" est donc quasiment nulle. Et si jamais le nombre de lignes de blocs de lien augmente, fixer la hauteur de "homemenu" posera un problème.

Et là, je vois pas comment résoudre ce problème. Les liens sont des éléments de bloc, donc pour leur donner une dimension, ils faut que ce soient des blocs, mais pour les avoir sur une même ligne, il faut les mettre en flottant... C'est le serpent qui se mord la queue.

J'ai finalement trouvé une solution, mais si elle comporte quelques défauts :
J'ai donc transformé mes blocs en <a> (ce qui est parfait, vu qu'il s'agit d'un menu), avec un display:inline-block; et des dimensiosn fixes.
Ils s'affichent en ligne, à la fois sous FF et IE. De plus, pas besoin de spécifier un float;left dans le conteneur parent, vu que les blocs enfants n'en ont pas.

Le problème vient du fait que si le texte du bloc devient trop grand, le <a> ne se comporte pas comme un bloc, le texte va à la ligne, et sort du bloc <a>, qui à des dimensions fixes : /
Mais pour le moment, mes blocs sont assez larges, et le texte n'est pas très grand, donc rien ne dépasse.