Je commence par le post scriptum :
gauguin a écrit :
ps : j'en profite pour remercier alsacréation de m'acceuillir sur ce forum et j'espère ne pas avoir à poser trop de questions facheuses.
Non non, pour l'instant niveau questions ça va. Et puis c'est toujours un plaisir d'accueillir un grand artiste. J'adore votre dernier film, d'ailleurs
gauguin a écrit :
Sais-tu pourquoi cela réagit comme ça, c-à-d :
1- Pourquoi si je donne également, et sans mettre de marge gauche, une largeur au statique (3) qui suit le flottant (2) , le statique change de ligne
2-pourquoi devoir préciser une marge gauche (dans ce cas là) au static (3) qui suit le flottant (2) afin de pouvoir donner une largeur au deux div (2 et 3)
Pour la première question j'avoue que je ne sais pas au juste, c'est surtout un comportement que je constate (d'ailleurs en général j'oublie que ça se passe comme ça, je fais ma mise en page et paf! ça ne marche pas, et c'est là que je me rappelle que.)
Par contre, pour la deuxième question je peux peut-être répondre.
Ce qu'il faut savoir pour commencer :
- un élément de type bloc flottant prend par défaut la largeur de son contenu ;
- un élément de type bloc statique prend par défaut 100% de la largeur disponible.
Maintenant, si dans un conteneur de largeur 600px on a en premier un bloc flottant à gauche de largeur 200px, il nous reste 400 pixels de large. En donnant 400px de large au deuxième bloc tout en le faisant flotter à gauche ou à droite, ça tiendra. Il faut savoir que si jamais il manquant un seul pixel, le deuxième bloc passerait à la ligne.
Mais revenons un peu en arrière : disons qu'on a un premier bloc (toujours 200px de large) flottant à gauche. Ou à droite, d'ailleurs. Bref, il flotte. Ce qui signifie concrètement :
- qu'il se place
par dessus les éléments qui le suivent dans le flux (des paragraphes ou des listes, par exemple) ;
- qu'il repousse néanmoins,
à l'intérieur de ces éléments, les objets de type en-ligne, dont le texte, les images, etc.
Il faudrait que je vérifie ce dernier point par des tests complets, mais c'est le comportement que j'observe.
Un objet flottant a donc un comportement différent d'un élément statique, mais aussi différent de celui d'un élément en positionnement absolu (que Dreamweaver appelle "calque" par analogie à ce qu'on trouve dans les applications graphiques : ça flotte par dessus (ou par dessous) sans la moindre interaction avec le reste).
Donc, si le deuxième bloc a une marge à gauche de la largeur du bloc flottant à gauche, ce bloc flottant flotte par dessus le deuxième bloc (la marge faisant techniquement partie du bloc, même si graphiquement ce n'est pas le cas). On a donc besoin de la marge à gauche pour créer l'impression graphique d'un élément qui se décale à droite.
Bon, à ce stade là je crois que je suis loin d'être clair
... moi-même je tâtonne...
En tout cas, pour répondre à ta question, donner une marge à gauche au premier bloc n'est pas nécessaire pour pouvoir donner une largeur aux deux blocs. C'est nécessaire pour créer l'impression graphique de deux blocs qui ne se chevauchent pas, et en gros c'est tout. Ensuite, on peut garder notre deuxième bloc avec une largeur automatique : dans notre exemple, on lui donnera une marge à gauche de 210px (par exemple), ce qui nous donnera une largeur totale de 600 - 210 = 390px.
Par contre, si nos deux blocs sont flottants, ils doivent tous les deux tenir dans la largeur disponible, sinon le deuxième passera à la ligne. Si on met le premier en flottant à gauche et le deuxième en flottant à droite, la seule solution sera d'avoir deux largeurs fixes ou relatives dont la somme fait 600px ou moins (en fixe) ou 100% ou moins (en relatif).
- Si donne une largeur fixe de 50% au premier bloc mais pas de largeur au deuxième bloc, le deuxième bloc prendra toute la largeur nécessaire à son contenu. Si ce contenu est du texte de plus de quelques mots, il est probable que ce deuxième bloc s'étende jusqu'à 100% de la largeur du conteneur. On aura donc au total 50% + 100% = 150%. Pas bon, ça passe à la ligne.
- Si on donne une largeur de 50% au premier bloc, et de 50% au deuxième, ça passe. On fera attention cependant aux bordures et aux blancs internes (padding), qui se rajoutent
en plus de la largeur indiquée. Avec deux blocs de 50% ayant tous deux une bordure de 1px, on aura en tout (1px + 50% + 1px) + (1px + 50% + 1px) = 100% + 4px, soit 4 pixels de trop. Ça ne passe pas.
Voilà, j'espère que ça peut t'aider un peu, et que tu n'es pas dix fois plus perplexe maintenant qu'avant
