[resolu] Probleme de float et de clear

Bonjour,
je suis en train de faire une nouvelle version de mon site,
pour ce faire j'ai bien sur choisi les standards.
Cela veut dire aussi reffaire toutes les pages de A à Z, mais bon, c'est pour la bonne cause

Donc parlons du probleme qui ma manger une grosse partie de mon apres midi !
Mon design est constituer de 3 colonnes (un menu float: right, un autre menu float: left et un millieu.)

Pour le moment tout fonctionne comme j'en ai envie mais voila que je commence a m'attaquer au contenue de mes pages.

Tant qu'a se mettre au CSS, autant profiter de toutes ses possibilités,
alors desormer je veut mettre des images dans mes textes, en utilisant un float !

Pratique plus que courante, je l'ai deja utiliser a de nombreuse reprise,
sans aucun probleme.

Alors voila, j'ai mon image en float:left;,
elle floatte bien
Puis, je veut que le paragraphe suivant retourne en dessous,
alors je lui met un clear:both;, tout simplement

Et bah non... Il veut pas !

Le paragraphe "Clearrer" se positionne en faite a la hauteur de la fin de mes menu latéraux !
Comme si le clear faisait effet sur le flux principal, celui des menus et du millieu, alors qui se trouve dans le millieu...

Je suis complement persu j'ai essayer plein plein plein de diffenrentes maniére pour presenté cette page...

Plus efficace que mon long discour,
un lien !
Le H2 doit retombé sous l'image flottante.
C'est pourtant pas la mort !

Merci à tout ceux qui se pencheron sur mon probleme, l'erreur doit etre toute conne en plus...
J'espere que j'ai assez detailler mon probleme en tout cas

merci
Modifié par Mobman02 (26 Jul 2005 - 20:26)

Je suis toujours bloqué a cette fichu page...

J'ai changer de tactique, en mettant plutôt des class a l'image et au paragraphe, je me suis dit qu'en designant la class avec
son chemin complet ca allais peut etre faire ce que je voulais...
J'ai aussi tenter de mettre les deux elements en question dans un div avec la class test

Donc en gros, le CSS c'est ca:

#middle .test .float_left {
float: left;
margin-right: 5px;
}
#middle .test .clear_both {
clear: both;
}

Tout ce qu'il y a de plus normal..
Et le code HTML:

[b]<div id="middle">[/b]
    <h1>bla bla bla</h1>
    <p>Blabla au dessus de l'image</p>
[b]<div class="test">[/b]<p>[b]<img src="http://www.consoles-dimension.com/driver/driv3rGBA/16.jpg" class="float_left" alt="Image de Driv3r GBA" />[/b]</p>
<p>Bla bla sur le coté de l'image</p>
[b]<p class="clear_both">[/b]BlaBla un paragraphe en dessous de l'image... mais il se met en dessous des menus ![b]</p></div>[/b]
<h2>Bla Bla</h2>
<p>BlaBla</p>
    </div>

Voila... Je ne peu pas etre plus clair que ca...
Et je commence a desesperer...
Modifié par Mobman02 (26 Jul 2005 - 13:30)

Plop,

petite question, pourquoi ton img est dans un <p> tout seul ?

En mettant l'img dans le <p> du texte qui sert de commentaire, le clear: both devient inutile si je ne m'abuse.

Un élément doté de la propriété clear réagit à n'importe quel flottant :
- que celui-ci soit présent ou non dans la même <div>
- que celui-ci soit "proche" ou "lointain" dans l'ordre du code HTML

La seule chose qui compte, c'est la position affichée des flottants. Pour décrire ce mécanisme, on pourrait décomposer en deux temps fictifs le placement de ton élément doté d'un clear:both :
- il commence par repérer sa position s'il n'avait pas cette propriété, pour savoir quels sont tous les flottants à sa droite et à sa gauche.
- puis, il va se placer plus bas que la ligne inférieure du flottant le plus long.

Autrement-dit, il est tout à normal que ton élément doté d'un "clear:both", "clear:left" ou "clear:right" se place en fonction de tes colonnes gauches et droites... puisque celles-ci sont des flottants

Pour réaliser ce que tu cherches, il faut envisager une autre combinaison de positonnement globale, ou bien obtenir cet effet autour de ton image avec une autre solution que le flottant.
Modifié par Laurent Denis (26 Jul 2005 - 13:48)

Ah bah tu m'etonne que je chercher comme un boeuf...

Bon et que me conseille tu pour faire cet effet ?
Parce que ça fait tres beau malgres tout

Merci

Avec ton pied de page qui fait toute la largeur d'affichage, y compris sous les colonnes latérales, repasser le design en position absolue serait une mauvaise solution.

Donc, c'est plutôt le système de l'image en float qu'il faut changer.

tyx t'a donné une première piste : placer ton image comme premier élément de ton paragraphe de texte :

<p><img...> <span>Lorem ipsum...</span></p>

le span est tout à fait optionnel : il peut éventuellement te faciliter certains détails de marges. La propriété vertical-align sera sans doute aussi ton amie

Si tu ne trouves pas ce qui te convient de cette manière, les display-inline et display-table-cell sont une autre option, mais il faudra faire avec les navigateurs qui n'aiment pas display-table

En dernier recours... Un grand vieux tableau de présentation à deux colonnes, une pour l'image, une pour le texte
Modifié par Laurent Denis (26 Jul 2005 - 18:18)

Ok je voit...

Bon bah... au pire je sent que je vais laisser le float sur mon image, et mettre plusieur <p> pour pousser le suite.
Je ne voulais pas faire comme ca a cause des personne qui on des resolutions superieur a 1024, mais je vais m'arranger en placant des <br /> sur le texte a coté de l'image.
En plus ca sera mieu que d'avoir des grrraaannnde ligne.

Merci de m'avoir aider, je pense que c'es resolu