Contenu dépasse du div! [RESOLU]

[Fabrice.Tres.Net]

Un élément flottant "à l'intérieur" d'un div n'appartient plus au flux du div. Il vient en concurrence avec le reste du contenu du div. Il est positionné prioritairement par rapport aux éléments qui le suivent.
C'est pour cela que tu as l'impression qu'il dépasse du div. En fait, le div et le flottant sont 2 éléments différents!

On peut s'affranchir des <br /> mais il faut être parfois pragmatique et savoir choisir une solution simple à une usine à gaz. A mon avis, augmenter ponctuellement l'espace entre 2 paragraphes peut se faire avec un retour à la ligne supplémentaire.

[Gagea]

J'ai vu que tu avais encore les 3 petits points après la dernière image !
Cette page "nos concerts" : sans doute toi, tu trouves qu'elle est très claire mais pas pour tous les visiteurs de ton site. S'agit-il d'une page de données avec date, lieu, nom des chorales et une petite image illustrative pour chaque concert ?
Par exemple :

hagetmau : Le Samedi 16 Mai Salle de la ROTONDE

on peut se demander si ce concert a eu lieu en mai 2008 ou bien s'il doit avoir lieu en 2009. Le titre de la page est Calendrier 2008-2009 mais dans la mesure où il y a des photos on peut supposer que c'est déjà passé...
Tu cites 3 concerts sur cette page, je trouve que :

• Chacun devrait être mieux individualisé
  Peut-être un peu plus de texte pour présenter chaque chorale
  Les dates complètes avec l'année
  Les photos devraient être des vignettes cliquables et il faudrait indiquer la date, le lieu et l'auteur de la photo

Mais ce n'est que mon opinion. Les 3 petits points me dérangent moins que ce que je viens de t'évoquer.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[GAUNCE]

D'accord, effectivement j'ai fait l'essai avec une autre page ou deux images clôturaient le div. La première étant en float:left et l'autre en flux pas de problème, si la seconde est est en float:right le div remonte au dessus des images. Donc effectivement le flottement fait sortir l'objet du div si celui-ci est positionné en dernier, dans le cas inverse tout rentre dans l'ordre.
J'ai maintenu une image positionnée en dernier et pour pas que le div remonte je fais: <p style="clear: left;"></p> et c'est OK.
Merci Fabrice.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[GAUNCE]

Gagea, les petits points ont disparus puisqu'il suffit de mettre un paragraphe en clear pour résoudre le problème et de surcroit les points dans un cas comme celà signifie qu'il y a une suite.
Donc il s'agit comme j'ai déja dit d'un calendrier, c'est le titre, donc je n'ai rien à expliciter. Par contre OK pour les dates( suggestions retenues) et j'ai séparé chaque date de concert pour une meilleure lisibilité.
Quant aux personnes qui envoient les photos, ils sont de savoir qui a pris les photos et ou etc...
donc le lieu, l'endroit éventuel et un aperçu de ou des chorales et basta.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

Si tu alternes les float à droite et à gauche, tu peux utiliser un clear:both ! qui force la mise à la ligne après les flottants de droite et/ou de gauche!

[GAUNCE]

Et c'est Fabrice qui vient de gagner 20g de foie gras supplèmentaire

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

Et c'est Fabrice qui vient de gagner 20g de foie gras supplèmentaire

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Merci! Je m'en délecte déjà les babines.
Je vais pouvoir comparer les 2 foies gras des 2 régions qui ont popularisé ce mets venu d'Egypte.

L’Alsace et le Sud Ouest

C’est seulement au XIXème siècle qu’il fit son apparition d’abord en Alsace puis dans le Sud Ouest. Jean-Pierre Clause, officier de bouche du maréchal de Contades, gouverneur de l’Alsace, met au point la première recette de pâté de foie gras qui jusque là était consommé cru. Les foies entiers en croûte cuisaient au four dans une terrine sur un hachis de lard et de veau. Le Sud-Ouest conservera jalousement la tradition du cru.
Ce n’est que vers 1960 que le foie gras s’installe définitivement au coeur des menus gastronomiques.
Même si le foie gras se répandit d’abord en l’Alsace, aujourd’hui plus de 50 départements en sont producteurs et il provient désormais pour l’essentiel du Sud-Ouest.

[Invité]

Bonjour Gaunce et Fabrice,
J'ai profité de ce post pour compléter la page Insérer des images de mon tuto.
J'avais eu aussi ce problème mais comme j'ai rapidement compris qu'une image flottante était complètement indépendante du div je m'arrangeais pour l'insérer plus haut afin qu'elle ne dépasse pas.
Merci à tous les deux.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[chinon37]

Gagea, t'es repérée

[Fabrice.Tres.Net]

Gagea,

tu peux rajouter en préambule quelque chose comme:

Préambule:
Le positionnement par défaut des images se fait dans le flux courant, c'est un peu comme-ci on introduisait un gros ou très gros caractères dans une phrase, cela va perturber l'arrangement du texte autour de l'image.

1. Image dans le flux courant

Le flux de la page peux ne pas être le flux courant, mais comme d'habitude, nous sommes au stade de truffer un foie gras de qualité.