Martin Ficzel: css float und die auflösung in IE und Moz

ich habe ein problem mit dem verhalten von float in mozilla browsern
wenn ich ein float:left innerhalb eines umrahmten bereiches benutze.

die struktur sieht aus wie folgt:

<div style="border:1px solid black; width:100px; clear:both;">
  <div style="width:50px;height:50px; background-color:red; float:left;">
    foo
  </div>
  bar
</div>

der explorer und opera ziehen den umgebenden border mit auf, während mozilla und konqueror den rahmen lediglich bis zur unteren grenze des textes aufziehen. das sieht superblös aus sobald mal etwas weniger text zu sehen ist.

um das nachzuvollziehen bitte mal die url im firefox und ie ansehen dann ist klar was ich meine.

FRAGE: gibt es dafür eine lösung über css ... und welcher der browser verhält sch hier eigentlich standardkonform

  1. Hi,

    FRAGE: gibt es dafür eine lösung über css ... und welcher der browser verhält sch hier eigentlich standardkonform

    Wie nicht anders zu erwarten setzen die Geckos das CSS standardkonform um - der Opera zeigt wieder mal, daß er Fehler des IE bestens nachahmen kann. ;-)

    Zum Verständnis: eine floatende Box ist aus dem Elementenfluß genommen und beeinflußt eine umgebende nicht-floatende Box nicht. Die Standardlösung ist, den Elementenfluß über ein clearendes Element wieder herzustellen.

    freundliche Grüße
    Ingo

    1. danke euch beiden... der tip und die lösung sind gut ... ein simples
      <div class="clear" > </div> funktioniertprima. aber ich vermute das das so nicht standardkonform ist (leeres div)... liege ich da richtig ??

      welches html element nutzt ihr dafür ich möchte ungern wieder anfngen &nbsp;'s oder spacer einzubauen

      gruß Martin

      1. Hi,

        <div class="clear" > </div> funktioniertprima. aber ich vermute das das so nicht standardkonform ist (leeres div)

        standardkonform schon, aber nicht schön. Nur geht es nicht besser, wenn kein anderes Element mehr vorhanden ist, dem man diese Eigenschaft zuweisen könnte. Und ein leeres DIV ist als bedeutzungsloses Element immer noch sinnvoller, als z.B. ein br.

        freundliche Grüße
        Ingo

        1. Danke für die Hinweise ... das war eines der letzten großen CSS Rätsel für mich ...

          gruß Martin

  2. Hi,

    <div style="border:1px solid black; width:100px; clear:both;">
      <div style="width:50px;height:50px; background-color:red; float:left;">
        foo
      </div>
      bar
    </div>

    der explorer und opera ziehen den umgebenden border mit auf, während mozilla und konqueror den rahmen lediglich bis zur unteren grenze des textes aufziehen. das sieht superblös aus sobald mal etwas weniger text zu sehen ist.

    Tja, auch wenn es Dir nicht gefällt:

    durch das float ist das innere div kein Bestandteil des äußeren mehr und darf daher dessen Höhe nicht beeinflussen.
    IE macht das falsch, Opera auch.

    um das nachzuvollziehen bitte mal die url im firefox und ie ansehen dann ist klar was ich meine.

    Nicht nötig.

    FRAGE: gibt es dafür eine lösung über css ... und welcher der browser verhält sch hier eigentlich standardkonform

    Die Geckos und der Konqueror.

    Füge am Ende des äußeren div noch ein Element ein, daß per clear dafür sorgt, daß es unterhalb des gefloateten Teils dargestellt werden muß, was dann zur Folge hat, daß der Rahmen großgezogen werden muß.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.