[Résolu] Modele07.css et utilisation de flottants

Bonjour

Je fais des essais à partir http://www.alsacreations.com/static/gabarits/styles/modele07.css

Je désire placer une image dans la partie principale (nommée contenu dans modele07) à gauche et quelques lignes juxtaposées (ici une liste), mais une fois la liste terminée, je souhaite continuer par un paragraphe sous l'image. Par habitude, j'ai utilisé

<div style="float: left;>

et enfin une fois ma liste placée, je me suis dit qu'un

clear

placerait la suite du texte sous l'image.

C'est bien le cas, sauf que le float de la navigation a une hauteur plus grande que celle de la partie contenu. Du coup mon texte se retrouve bien en dessous de l'image et dans la partie principale mais au niveau inférieur de la navigation.

En reprenant le code du modèle 07, le code que j'ai utilisé est le suivant ( l'image est celle de la démo)

<div id="contenu">
  <div style="float: left;"> 
  <img src="picto/07.png" width="100"  alt="07">
 </div> 
 <p>texte à droite de l'image. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus...</p>
<div style="clear:both"><p> Suite du texte.Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p></div>
</div><!-- #contenu -->

Si je ne peux pas utilser float dans la partie centrale alors que dois-je faire ?

Une solution semble de modifier modele07.css de la façon suivante . L'idée générale serait de placer contenu d'abord puis navigation avec une marge gauche négative.

Il suffirait d'ajouter à centre float:left; puis de modifier navigation

#navigation {
	width: 			120px;
	float: 			left; /* -> 6 */
	margin-left:                -760px; /* c'est un ajout */
}

enfin d'inverser le placement du contenu et de la navigation. D'abord contenu dans centre puis navigation.
Et pour terminer : ajouter clear:left; au pied de page. Ainsi je peux placer un code du genre

<div style="clear:both"></div>

pour terminer le texte à droite de mon image et continuer sous l'image.

Le code de la page aurait comme structure :

<div id="global"> <!-- width fixe 760px -->
	<div id="centre"> <!-- float : left -->
	  <div id="contenu">  <!-- margin-left: 	120px; -->
      </div><!-- #contenu -->
     </div><!-- #centre -->
  <div id="navigation">  <!-- float :left ; margin-left:-760px ; width:120px -->
  </div><!-- #navigation -->
  <div id="pied"> <!-- #pied  clear : left-->
  </div><!-- #pied -->

N'étant un expert je me demande si mon bricolage tient la route.
1) Est-ce que cette modification peut entraîner des effets secondaires ?
2) Peut-on conserver modele07.css intact et trouver une autre méthode pour juxtaposer image et texte avec la possibilité de repasser sous l'image avec le paragraphe suivant ?

Bonjour et bienvenue,

de la même façon que "overflow: hidden;" empêche le contenu de la colonne #centre de s'écouler sous le bloc #navigation après avoir été à sa droite, tu peux faire flotter l'image et avoir ta liste en "overflow: hidden;" : si elle est plus haute que l'image, elle formera quand même une espèce de colonne sans se continuer sous l'image. Et pour le paragraphe de texte qui doit lui passer sous l'image (et sous la liste), un "clear: both;" est effectivement la bonne solution (ce paragraphe ne doit évidemment pas être dans le bloc en overflow: hidden;).

Si clear: both; ne suffit pas, rajoute un clearfix sur un élément contenant l'image et la liste mais pas le paragraphe.

Merci pour cette réponse. L'ajout de "overflow: hidden;" pour l'image et la liste est en effet suffisant. Pas besoin de modifier la structure de la page. Il va falloir que j'étudie de plus près toutes les possibilités de "overflow" .