CSS, probleme de clear:both ?

[rtb]

Bonjour,
je tente de passer mon site en css 3 colonnes dynamiques.
code feuille de style :
#conteneur {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding: 0;
background-color: #fff;
}
#centre {margin-left:20%;margin-right:20%;margin-top:10px;padding:10px;background-color:#E9F0FC;border:1px solid #000099;}
#gauche {float: left;width: 20%;}
#droite {float: right;width: 20%;}

page -http://www.landes-tourisme.info/modele.php

Ca marche sans probleme sauf que quand je met dans le div id="centre" une image et que je veux empecher le chevauchement des blocs par un bloc separateur contenant le style
clear:both;
cela fait descendre mon menu de gauche sous le bloc separateur. Je comprends pas pourquoi le clear:both annule le flux du menu gauche?
Comment faire pour empecher le chevauchement des images ?
hum, j'espere avoir ete clair....
Merci a vous

[Jderamaix]

Euh... juste pour comprendre :
Ton menu de gauche c'est celui qui s'appelle menu gauche et qui est à droite ?

Sinon, je n'arrive pas bien à comprendre où est ton image et ton problème.

Peux-tu expliciter voire même faire une page qui marche et une qui marche pas ?

++

[rtb]

merci a toi,
la tu avais le separateur sans clear:both; et maintenant je met le separateur avec.
.separateur{border-bottom:dashed 1px #ccc;padding:5px 0px;clear:both;}
en fait maintenant c'est le corps qui passe au dessous des menus

[Jderamaix]

Je sais, j'ai fini par trouver :

Il ne faut pas utiliser de clear sur un objet qui n'a pas la propriété float.

Ton #centre n'est pas flottant et si il se place bien dans ta page, c'es t parce que tu lui mets une marge.
Mais quand tu lui dis de clear:both, lui n'a pas de raison de flotter et donc est prioritaire pour garder sa position. Résultat ce sont des divs flottant qui s'écartent.

++

[rtb]

Ok, je vois mais comment palier a cela?
merci de ton aide , pas si simple les css

[rtb]

Je crois que j'ai trouvé l'astuce, un pixel en witdh 100%... mais la c'est le texte dans la balise p qui apparait amoitie sous IE....

[Jderamaix]

Le plus simple, ca serait de mettre ton div #centre avec un float:left; et tu pourras supprimer les margin:20%. Limite ton div #droite tu pourrais aussi le passer en float:left. A ce moment-là, ça suivra l'ordre normal (gauche, centre, droite)

++

[Jderamaix]

A oui et un conseil :

Evite de mélanger les carac de <div> <p> <hn>qui sont des blocks et <span> et <a> (par exemple) qui sont des éléments.

Rédige plutôt ton texte de la façon suivante :
<p><span>ton texte</span></p> Parfois, ça évite des grosses galères, surtout dans les imbrications.
En gros, dans tes balises de block, tu mets tes caracs de blocs (width, height, float, background etc) et dans tes span et a tes caracs de police (font-size, font-weight, color)

C'est un peu plus galère, un poil plus lourd en terme de html, mais 1000 fois plus souple à l'usage.

++

[rtb]

Merci du conseil, c'est mes débuts CSS et c'est vrai que c'est pas encore super clair.

[rtb]

Le plus simple, ca serait de mettre ton div #centre avec un float:left; et tu pourras supprimer les margin:20%. Limite ton div #droite tu pourrais aussi le passer en float:left. A ce moment-là, ça suivra l'ordre normal (gauche, centre, droite)

++

j'avais essayé mais ca marchais pas, je vais retester

[thomaspirit]

Oui, je passerais le #centre comme ça

#centre {
overflow: hidden;
float: left;
width: 55%;
}

le "width: auto;" marcherais bien aussi à tester ...

[rtb]

avec cette technique ca fonctionne mais je suis obligé de caller la largeur du bloc centre en % et cela ne marche pas si le total des % des bloc = 100%, le centre doit resté inferieur a 56% pour que ca marche et qd oon reduit, arrive a une certaine largeur le bloc de droite passe au dessous, y'a t'il un moyen de garder les colonnes en ligne ?
Merci a vous

[rtb]

Oui, je passerais le #centre comme ça

#centre {
overflow: hidden;
float: left;
width: 55%;
}

le "width: auto;" marcherais bien aussi à tester ...

ca fonctionne pas mieux, des que ca reduit de trop la colonne droite passe au dessous... et je voudrais bien qu'elle reste la !!!!!!!!
Merci

[Jderamaix]

L'histoire du total <100% ça vient d'un petit soucis d'interprétation entre IE et FF.
Quand tu spécifies border, margin (et padding, mais pas sûr, faudrait que je vérifie), FF les fusionne avec ta valeur width. IE les ajoute à ta width.

Par exemple si tu fais
#div {width:100px; margin-left:10px;}
IE te fera un bloc de 110px de large et FF un bloc de 100px

C'est très très très chiant.

++

[netsys]

Voir tout à la fin de la page http://www.openweb.eu.org/articles/initiation_float/