Bonjour,
J'ai un problème pour positionner correctement des DIV. voici ce que j'aimerais faire.
 
http://dl.free.fr/qWmDgjHoL
 
Le conteneur 4 est je pense nécessaire pour que le 3 reste sous les 1 et 2 (il y a un peu de texte au-dessus du 3, je veux qu'il reste aussi sous les 1 et 2.
 

Les floats ce n'est pas du tout fait pour ca. Normal que tu ais des problemes. Utilise plutot des position absolute top/left/right/bottom.

Les floats c'est JUSTEMENT fait pour ça, les position absolute t'obligent à avoir des contenus statics

Les floats sont faits pour positionner les blocs a l'interieur de flux inline.  
Dans ce cas, ca modifie les flux et ton contenant ne sera jamais correctement dimensionne avec un contenu dynamique qui n'est pas dans le meme flux.
Utiliser float pour un modele 'boite' comme celui en lien, c'est a peu pres la meme chose que d'utiliser 5000000 divs au lieu d'un table pour afficher une matrice.

ho putain, toi tu n'as rien compris aux css
A part pour la notion des flux, mais pour le reste, tu n'a rien pigé.
Je t'invite à reprendre les bases ou venir postuler dans ma boite tu comprendras la puissant des floats
Tiens et sinon pour te faire comprendre, voici un exemple :
http://jsfiddle.net/AJmT8/2/

Ca fait plaisir d'avoir des commentaires qui disent que je n'ai rien compris de la part d'un gars qui :
1- ne propose pas de solution
2- fout visiblement des float n'importe ou parcequ'il n'as rien compris a leur utilite a la base.
Donc, ton lien va aller droit dans ma poubelle direct, ne te trompe pas, ca fait VRAIMENT plaisir de ne pas penser comme ca
 
Pour le reste, @aideinfo.
Un exemple de ce que tu peux faire en changeant les flux, ceci ne fonctionne qu'avec ie :

Et le meme effet avec les vrais navigateurs.

Et les float, tu oublie. Ca n'est pas utilisable dans un modele a boite point. Si tu veux les utiliser, oublie les designs a boite.

- display:inline-block ne marche pas sur les éléments de type inline sous IE6
le probleme de inline-block, c'est que tu te retrouves avec des espaces qui sont liés au retrour chariot ou un espace dans le HTML. Cet espace dépendra du font-size de l'élément parent. Du coup tu te retrouves avec un espace que tu ne peux pas gérer facilement.
- mettre un display:inline sur un div c'est joli, mais quand tu auras des éléments de type bloc dedans tu l'auras dans le cul.
- display:table n'existe ni sous IE7 ni ie6.
- un id ne doit jamais commencer par un chiffre.  
 
Maintenant tu vas m'expliquer :  
- en QUOI les floats ne sont pas utilisables dans ce contexte là. C'est justement dans ce contexte qu'ils sont idéaux.  
- en quoi mon exemple qui utilise le contexte de formatage est à chier ?  
Je float mon #cadre2, ensuite #cadre3 par défaut va débuter à gauche de cadre 2 si je ne lui applique pas de contexte de formatage.
Le contexte de formatage est aussi utilisé pour contenir les éléments flottant qui sortent du flux.
- Regarde comment sont fait tous les frameworks de grids
- Tu dis que j'utilises 36 floats dans mon exemple alors qu'il n'y en a QU'UN SEUL.

Les floats taillent les contenants a partir des elements dans le meme flux.
Si tu avais pris la peine de telecharger l'exemple du gars avant tu saurais donc pourquoi ils ne sont pas utilisables dans ce cas sauf a fixer des hauteurs pour les contenus. Enfin, si et seulement si tu as compris qq chose au fonctionnement des floats et des flux, dans le cas contraire je perd mon temps et t'invite a chercher sur google ce qu'est un flux.
 
Quand a la compatibilité d'un code exemple avec netscape 2 sous mac je m'en balance et la numerotation des divs, je m'en fiche aussi completement. Si tu veux continuer a couper les cheveux en 4 tu peux aussi t'amuser a commenter le fait que je n'ai mis ni meta, ni <? ni type dans mon premier exemple, ca aussi je m'en fous completement.
 
De quoi sont fait tous les framework grid... Tu en connais un rayon pour tout savoir sur tous les frameworks. Le seul probleme c'est que c'est une grosse connerie, il en existe de nombreux a base de table et surement pas de div float (jquery, jqgrid par exemple).
 
Dans ton exemple, saisis suffisament de texte juste dans un des deux cadres et admire le massacre.

On a pas du se comprendre.

Desole, je suis de mauvais poil en ce moment. Je vais donc essayer plus calmement, deja de faire fi de mes autres problemes...  
 
L'exemple fourni est un modele boite (ou des divs imbriques de taille variable sont presents) et tailler le contenant avec des contenus dans des floats differents n'est tout simplement pas possible.
 
Apres, float ca fonctionne tres bien, chaque fois que je fais un formulaire, j'ai des champs 'normaux', des labels float avec une taille et un aligment right, le tout dans un fieldset qui englobe un gros ul et c'est nickel, ce n'est pas float en lui meme qui me pose un probleme
 
A+
 
Fred
 

Nan mais en fait quand tu dis : les flottants taillent les contenants, ca ne veut strictement rien dire. Mais je traduirais plutôt de cette manière :
Les éléments flottants sortent du flux. Et si un <div> ou élément bloc englobe des flottants, il ne fait que la hauteur des éléments qui sont encore dans le flux. En résumé si un conteneur ne possède que des éléments flottant, il fera 0px de haut.
Pour résoudre ce problème il y a plusieurs méthodes :
- le clearfix : contenant:after {content:" "; clear:both; display:block; height:0; visibility:hidden}
- Appliquer du contexte de formatage sur le contenant via des propriétés comme :
- overflow:hidden;
- display : table/table-cell/inline-block
- float:left|right (oui ca entraine du contexte de formatage)
- et pour IE6/7 il suffit d'appliquer le haslayout via zoom:1 ou des propriétés telles que : float:left|right; width|height autre que auto; display:inline-block.

Edit : et je rajouterai aussi cette règle :
- Un élément flottant prend la largeur de son contenu s'il n'a pas de largeur.

C'est ca, et a moi ca me parait clair mais je ne suis pas sur que cela l'aurait ete au moment ou j'ai decouvert les float et les divs.
A un detail pret neanmoins, si le contenant est dans le meme flux (dans l'exemple si je mets div3 en float right), il est dimensionne aussi par rapport a la taille du contenu dans le meme flux (div2 qui est float right et non pas div1 qui n'est pas flotant toujours dans l'exemple que tu as code).
Pour toutes ces raisons, je n'applique jamais un float a un contenu ou un contenant mais uniquement a une element reelement flotant (image, libelle...) et considere comme une perversion du flotant de l'utiliser a ce fait.
Si tu veux le faire, le nouveau css inline-bloc est la pour ca.
 
Quand on me force vraiment (maintenance d'existant), mon code est souvent blinde en div clear:both qui ressemblent etrangement du point de vue semantique aux pixtrans des mises en page tableau de grandpapa car le after ne marche pas avec tous les navigateurs

En fait tu t'es juste résigné à ne pas utiliser de flottant car tu ne maitrise pas réellement le flottant.
 
Je te conseille de lire cet article sur le contexte de formatage :  
http://www.blog-and-blues.org/arti [...] _formatage
Ca t'éclaircira les idées sur pas mal de préjugés sur les float.
 

Les floats sont utilisés historiquement pour positioner du contenus sous forme de grille. C'est un hack oui, mais un hack cross-browser et futur proof. Mais inline-block en est un aussi, si tu veux vraiment faire du layout il faut utiliser le multi-column ou au pire le flex.

les floats c'est puissant quand meme, quand tu sais bien les utiliser ça marche de partout de manière strictement identique...

@Gatsu.
Pas vraiment. Simplement ecrire du code que je suis le seul ou presque a pouvoir lire dans ma boite, c'est pour moi ecrire du code pourri.
Donc du code avec des floats et un modele boite, meme s'il fonctionne, c'est a mes yeux un code de merde.
@Shinuza.
En fait, je ne fais jamais ca. Quand j'ai a afficher un tableau, je fous une balise table point. Chercher a dire que je fais un truc qui n'est pas un tableau que j'affiche toujours comme un tableau c'est pour moi le comble de la masturbation intellectuelle non productive
@Negueu
Une remarque vallable meme pour le HTML ou le gnoup12.3456 : Bien utilise ca marche de partout de maniere strictement identique. Si ca marche differement, c'est que tu l'utilise mal.

ah parce que du code avec des floats c'est à tes yeux du code de merde ?  
Mais justement c'est du code que plein et meme tout le monde maitrise et sait lire. Meme display:inline-block est moins connu.
Donc justement si tu pars de ce principe, c'est que tu as des idées toutes faites sur les floats parce que tu ne les maitrise pas.

Ben oui, du code ou le contenu se positionne n'importe comment en fonction du contenant comme l'exemple que tu as fourni et que tu est oblige de blinder en remarques styme
 
- le clearfix : contenant:after {content:" "; clear:both; display:block; height:0; visibility:hidden}
- Appliquer du contexte de formatage sur le contenant via des propriétés comme :  
- overflow:hidden;
- display : table/table-cell/inline-block
- float:left|right (oui ca entraine du contexte de formatage)
- et pour IE6/7 il suffit d'appliquer le haslayout via zoom:1 ou des propriétés telles que : float:left|right; width|height autre que auto; display:inline-block.
 
Pour obtenir un comportement a peu pres correct trans-browser, c'est effectivement a mes yeux du code de merde. Je te rassure, je ne suis pas le seul
Maintenant toi qui maitrise, fournis moi un code simple a base de float pour le modele boite fourni (disons pas plus merdique que celui que j'ai poste) qui supporte les contenus variable et on en reparle, au lieu de simplement dire "tu sais pas faire" et de ne pas arriver a pondre de soluce simplement potable.

Faire ceci : http://oocss.org/grids_docs.html
sans se soucier de la largeur du dernier élément.  
C'est quelque chose crossbrowser que tu n'obtiendras pas autrement. Et avec les inlineblocks tu n'obtiendras jamais ça.
Je pars du principe que tout est souple chez moi. Et le dernier élément va jusqu'au bout en étant calé.  
Dans ton exemple avec les inline-block, le dernier element n'arrive pas jusqu'à la fin du conteneur et du coup tu seras obligé de bricoler sa largeur.
 
Avec le système présenté ici dans les grids (qui peut être encore amélioré) tu peux le faire.
Ensuite il y a pleins de lignes dans la CSS. Mais tout ça expliqué intelligement n'est plus du code de merde aux yeux des autres : http://www.stubbornella.org/conten [...] -zoom-fix/
 
Je pourrais te montrer milles et une manière de coder des CSS sans quasiment se prendre la tête entre tous les browser. Déjà je pars du principe que tu vois ici : la souplesse, le dernier prend le reste. Ainsi je ne m'emmerde jamais avec les calages de largeurs ou les différences.
 
En plus je monte des sites très rapidement et proprement à partir d'un framework maison.

Qui ne repond tj pas a la question posee avec un contenu variable. Effectivement, en ne repondant pas au probleme, c'est possible avec des float peut etre meme plus facile.
Moi je fais encore plus vite avec word et enregistrer sous au format html.

non tu ne feras pas plus vite et plus simple.
 
Ensuite ce framework une fois dans un CMS permet au client de faire ce qu'il a envie au niveau du template de la page.

Ce n'est tj pas une reponse au probleme, tu dis que tu fais mieux qu'un modele a boite avec des float, et je n'ai jamais conteste ca, mais tu ne fais pas ce qui est demande.
J'en reviens donc a ce que je dis et redis depuis le debut, il n'est ni possible ni sain d'utiliser des floats dans un modele a boites.

en fait si c'est possible, c'est meme très sain. Bon on se comprendra jamais.

Merci Gatsu35, ça marche. Je consulterai tes liens pour essayer de me mettre enfin au positionnement "avancé". Je vous laisse à vos différends stylistiques.