Float IE und FF

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Float IE und FF

    Hi,

    ich verstehe hier was mit dem Float nicht ganz. Ich möchte beispielsweise 3 gleich große Div's nebeneinander Anordnen.

    Besipiel:
    PHP-Code:
    <div style="border: 1px solid grey;">
      <
    div style="width: 200px; height: 100px; float: left; border: 1px solid red;"></div>
      <
    div style="width: 200px; height: 100px; float: left; border: 1px solid red;"></div>
      <
    div style="width: 200px; height: 100px; float: left; border: 1px solid red;"></div>
    </
    div

    Nun ergibt sich aber ein Problem. Der Rahmen ist im FF nur etwa eine Zeile hoch und die inneren Boxen "floaten" hinaus. Duch eine Float-Angabe auf dem äußeren Div lässt sich das ganze lösen, so das die inneren Boxen IM äußeren Div sind.
    Der IE (6+7) benötigt das äußere float nicht. Irgendwie sehe ich es auch nicht ein, das äußere Div zu floaten, brauch es ja ansich auch nicht.

    Wo ist mein Denkfehler?


    Dank euch schonmal

  • #2
    welche doctype? bei xhtml transitional siehts im ie genau so aus wie ff, was ja eigentlich auch richtig ist, da du die elemente aus dem fluss nimmst.

    tipp: letztes float raus und mit margin-left arbeiten

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      tipp 2:
      Code:
      .clear {
      	clear:both;
      	overflow:hidden;
      	height:0;
      	display:block;
      }
      html>body .clear {
      	overflow:visible;
      }
      ins stylesheet, und das konstrukt so aufbauen:
      Code:
      <div style="border: 1px solid grey;">
        <div style="width: 200px; height: 100px; float: left; border: 1px solid red;"></div>
        <div style="width: 200px; height: 100px; float: left; border: 1px solid red;"></div>
        <div style="width: 200px; height: 100px; float: left; border: 1px solid red;"></div>
        <div class="clear">&amp;nbsp;</div>
      </div>
      Kissolino.com

      Kommentar


      • #4
        Hmm, doctype ist xhtml 1.0 transitional.

        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        Das mit dem clear: both erscheint mir aber wenigstens logisch. Danke euch beiden. Werd mir dann wohl doch nochmal das float Kapitel im dicken CSS Buch durchlesen müssen...

        Kommentar

        Lädt...
        X