28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Pour faire simple, le code est le suivant :


.left {float: left; width: 100px; height: 100px}
#clear {clear: left}

<div class="left">Un</div>
<div class="left">Deux</div>
<div id="clear">Trois</div>


Donc, j'espère que Trois va s'afficher à gauche, ce qui marche avec tous les navigateurs Mac.
Mais IE/6 coince Trois à la droite de deux...
En gros, ça donne :

UnDeux
Trois

Je comprends rien, je crois que ce bug est connu, il me semble même avoir vu un tuto dessus, mais j'ai perdi l'adresse, si vous pouvez m'aider, MERCI d'avance.
Les espaces blancs ne sont pas affichés, ce qui rend mon exemple difficile à comprendre.
Je remplace donc les espaces par des points :

UnDeux
.....Trois

Comme si le clear ne marchait que pour le deuxième div de gauche.

Alors que j'espère

UnDeux
Trois

J'espère que c'est clair, MERCI Smiley langue .
Administrateur
alex_br a écrit :
salut,

ça marchera mieux avec:

clear:both;

Logiquement non puisq'uil n'y a pas de flottant à droite, donc clear left devrait suffire Smiley ohwell
Effectivement, je ne vois pas le rapport...

Je vais essayer quand même (mais je n'ai pas de PC le w-e pour voir le résultat, juste un Mac).

Autrement, il me semble que ce bug est connu, et je suis sûr d'avoir vu une astuce pour le résoudre, mais je sais plus où.

Merci de vos réponses
Bon, il semblerait que le seul problème soit des espaces ou retours charriots dans la présentation du code html.

Si l'on enchaîne :

<div class="left">Un</div><div class="left">Deux</div><div id="clear">Trois</div>


Ce brave IE6 applique correctement la règle. Pas très pratique quand le code est long, mais bon à savoir...

Dans le même genre, si vous créez une liste en ligne, il faut enchaîner le code :


<ul><li>Un</li><li>Deux</li><li>Trois</li></ul>


Le moindre espace ou retour carriot se traduiit par léger espace entre les <li>

Merci
Smiley biggrin