clear:all funktioniert nicht?

[Konrad Rudolph]

Hallo,

ich verwende in meinem Design zur Zeit zwei spans, die nebeneinander in einem Container angeordnet sind, einer links und der andere rechts ausgerichtet, also so:

\\ <div>
    <span class="left">
        Text
    </span>
    <span class="right">
        Text
    </span>
    <br />
</div>
///

mit dem CSS:

\\ div {
    width: 330px;
}

div .left{
    float: left;
    text-align: left;
    width: 80%;
}

div .right{
    float: right;
    text-align: right;
    width: 20%;
}
///

das klappt im Mozilla auch. Der <br /> ist ein Pufferelement, weil sonst das nachrückende Element total verrückt.
Nun, leider wird der <br /> im IE aber als Leerzeile angezeigt (was im Mozilla natürlich nicht der Fall ist).

also habe ich jetzt versucht, das nachfolgende Element als clear: all zu definieren, aber das funktioniert nicht, es wird trotzdem an das gefloatete drangehängt.

Meine Frage: wie bekomme ich den <div> nach den Spams gecleared (und das in allen gängigen CSS2-Browsern, also Mozilla, Opera & IE).

ach ja: in dem Parent-div befinden sich noch mehr solche Elemente... eigentlich sieht das so aus:

div
 +-- span - float: left
 +-- span - float: right
 +-- div  - kein float
      +-- span
 +-- span - float: left
 +-- span - float: right
 +-- div - kein float
....

Gruß, KonRad -