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 -

[Christian Seiler]

Hallo Konrad,

also habe ich jetzt versucht, das nachfolgende Element als clear: all zu definieren, aber das funktioniert nicht,

Natürlich nicht, es heißt ja schließlich auch clear:both; und nicht clear:all;. (dagegen: <br clear="all">)

Viele Grüße,
Christian

[Konrad Rudolph]

Hallo,

also habe ich jetzt versucht, das nachfolgende Element als clear: all zu definieren, aber das funktioniert nicht,

Natürlich nicht, es heißt ja schließlich auch clear:both; und nicht clear:all;. (dagegen: <br clear="all">)

mein Fehler, ich habe natürlich clear: both geschrieben... geht trotzdem nicht :(

das ganze verkompliziert sich eventuell noch etwas durch den Fakt, daß die divs, die sich zwischen den spans befinden, display: hidden haben, d.h. nicht angezeigt werden.

Gruß,
KonRad -

[Christian Seiler]

Hallo Konrad,

mein Fehler, ich habe natürlich clear: both geschrieben... geht trotzdem nicht :(

Du wolltest ja folgende Struktur, nicht?

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

-> http://www.christian-seiler.de/temp/test-multi-floats.html

das ganze verkompliziert sich eventuell noch etwas durch den Fakt, daß die divs, die sich zwischen den spans befinden, display: hidden haben, d.h. nicht angezeigt werden.

display: hidden; gibt es nicht. Es gibt display: none; und visibility: hidden; Letzteres macht keinen Unterschied; ersteres bewirkt, dass diese Elemente so zu behandeln sind, als ob sie nie existiert hätten.

Viele Grüße,
Christian

[Konrad Rudolph]

display: hidden; gibt es nicht.

*gmrl* ist wohl schon zu spät für mich ;)
display: none meine ich natürlich.

trotzdem - es klappt bei mir irgendwie nicht. Ich poste mal den Originalcode, leider ein wenig unübersichtlich, da von einem PHP-Script generiert und ähm, irgendwie vermasselt der mit da was.

\\ <h2>Latest News</h2>
<div id="news-container">
    <div id="news">
        <span class="news-title">
            <a href="javascript:toggle_news('news1')">
                New Section: Others
            </a>
        </span>

<span class="news-date">
            30/06/2003
        </span>
        <div class="hidenews" id="msg_news1">
            <span>
                Added a section for programming languages other than VB (and .net).
            </span>
            <hr />
        </div>
        <span class="news-title">
            <a href="javascript:toggle_news('news2')">
                <bf>-Tag Works
            </a>
        </span>
        <span class="news-date">
            30/06/2006
        </span>

<span class="spacer"></span>
        <div class="hidenews" id="msg_news2">
            <span>
                Support for automatic BF code formatting added.<br />
The site has now VB, C and BF code formatting.
            </span>
            <hr />
        </div>
        ....
    </div>
</div>
///

und CSS:

\\ #news-container, #news-container-wide{
    border: none;
    margin:0 auto;
    text-align: center;
    width: 330px;
}

#news-container-wide{
    width: 500px;
}

#news{
    background-color: #E9E4DC;
    border: 1px solid #B6BDD2;
    padding: 7px;
    text-align: left;
}

#news .news-title{
    float: left;
    text-align: left;
    width: 80%;
}

#news .news-date{
    float: right;
    font-size: 11px;
    text-align: right;
    width: 20%;
}

#news .shownews{
    clear: both;
}

#news .shownews span{
    border: 1px dotted #B6BDD2;
    clear: both;
    display: block;
    margin: 2px;
    padding: 2px;
}

#news .shownews hr{
    border-top: 1px dashed #14246A;
    height: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
}

#news .hidenews{
    clear: both;
    display: none;
}

#news span.spacer{
    clear: both;
    display: block;
    height: 0;
}
///

den <span class="spacer"> habe ich jetzt hinzugefügt, weil der sonst auch im Mozilla den #news-div nicht bis nach unten durchzieht, sondern nur eine Zeile hoch anzeigt und die spans ragen dann darüber hinaus.

Gruß,
KonRad -

[Konrad Rudolph]

http://www.christian-seiler.de/temp/test-multi-floats.html

ach ja:

danke für das Beispiel, das geht auch (natürlich). Aber wenn ich das 1:1 übernehme (d.h. die width weg und display: block), dann kommt etwas ganz anderes dabei raus.

Gruß,
KonRad -

[Christian Seiler]

Hallo Konrad,

Aber wenn ich das 1:1 übernehme (d.h. die width weg und display: block),
dann kommt etwas ganz anderes dabei raus.

Sorry, ich kann Dir da leider nicht wirklich weiterhelfen, da ich keinen IE hier zum testen habe... Warum nimmst Du nicht mein Beispiel und baust es so lange um, bis es Deinen Vorstellungen entspricht? Wenn dann bei einem Schritt etwas schiefgeht, dann weißt Du wenigstens, woran es liegt.

Viele Grüße,
Christian

[Konrad Rudolph]

Hallo, Christian,

Sorry, ich kann Dir da leider nicht wirklich weiterhelfen, da ich keinen IE hier zum testen habe... Warum nimmst Du nicht mein Beispiel und baust es so lange um, bis es Deinen Vorstellungen entspricht? Wenn dann bei einem Schritt etwas schiefgeht, dann weißt Du wenigstens, woran es liegt.

ok, danke für deine Hilfe So werde ich's machen, das wird allerdings aufwendig... :)

Gruß,
KonRad -