CSS, probleme de clear:both ?

WRInaute impliqué
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
 
WRInaute occasionnel
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 ?

++
 
WRInaute impliqué
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
 
WRInaute occasionnel
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.

++
 
WRInaute impliqué
Ok, je vois mais comment palier a cela?
merci de ton aide ;-), pas si simple les css
 
WRInaute impliqué
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....
 
WRInaute occasionnel
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)

++
 
WRInaute occasionnel
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.

++
 
WRInaute impliqué
Merci du conseil, c'est mes débuts CSS et c'est vrai que c'est pas encore super clair.
 
WRInaute impliqué
Jderamaix a dit:
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
 
WRInaute discret
Oui, je passerais le #centre comme ça

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

le "width: auto;" marcherais bien aussi à tester ...
 
WRInaute impliqué
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
 
WRInaute impliqué
thomaspirit a dit:
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
 
WRInaute occasionnel
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.

++
 
WRInaute passionné
IE et FF n'interprete pas de la même maniere, c'est un fait !
Quand t'a un elt bloc avec un float dans un autre elt de type bloc la hauteur de l'element conteneur n'est pas spécifié sauf si il est lui meme assicié aun float ( et c'est ce qu'affiche FF)
 
WRInaute occasionnel
Ta colonne passe en dessous quand tu as plus de longueur dans tous tes éléments additionnés que dans l'espace imparti.

D'ailleurs, tu verras sur IE que c'est légèrement différent : seule ta colonne de droite est en bas.

Mon conseil est de virer tous les margin, padding et borders sur tes 3 blocs. Si déjà là, ça marche tu sais où ça pêche !

Pour palier ce merdier, personnellement, j'imbrique des divs si nécessaire... Oui, je sais, c'est nul.

++
 
WRInaute discret
J'ai à peu près le même problème que toi...
Sur mon site en 3 colonnes (float, center, float), j'ai une image flottante au centre et dès que je fais un clear: both pour passer en dessous de l'image... je me retrouve en dessous de mes 2 colonnes :(

Voilà je suis donc toujours à la recherche d'un truc "propre" pour régler ça ... :wink:
 
WRInaute impliqué
tu peux essayer avec un pixel width="100%", ca marche chez moi sauf que ca me colle un bug au niveau de l'affichage de l'article sous IE, celui-ci devient invisible, plus ou moins.... si tu fais le test et que ca colle fait le moi savoir, c'est que le bug chez moi aura une autre origine.
merci
 
WRInaute discret
Ca à l'air de bien fonctionner pour moi... J'ai pris un width de 90 % parce que ça n'allait pas à 100 %.
Va voir sur le site ds mon www, les pixels sont entre chaque images centrales et son url en dessous... Dis moi si tu vois quelque chose qui va pas
 
WRInaute impliqué
J'ai regardé sous IE et FF, ca colle sans probleme, t'as ta soluce ;).
Moi j'ai encore un bug d'affichage sous IE, en bas de page, lors que tu scrolles, les div deviennent partillement transparent, la transparence evolue avec le scroll....
Si quelqu'un a une idée ...
La page -http://www.landes-tourisme.info/modele.php
 
WRInaute discret
Bah merci à toi pour la soluce ;)

Pour ton problème, je vois pas comment faire. Il me semble que j'avais le même problème qd j'utilisais un float: right sur ma partie "centre" et en utilisant le 'clear: both;'... J'avais en fait la couleur background de ma partie gauche qui passait à certains endroits dans "centre".

Le jour où les browsers suivront tous le même standard ...
 
Discussions similaires
Haut