Confuse: Float

hi leutz,

kurze frage...

was mach ich falsch,

#x{
 width: auto;
 margin: 16px 18px 50px 18px;
 float: left;
 text-align:left;
}
----------------------------------------------------------
#x{
 width: 751px;
 margin: 16px 18px 50px 18px;
 float: left;
 text-align:left;
}

also das obere zeigt im ie alles i.o an und leider im firefox wird das div eine etage tiefer gesetzt...

beim 2ten klappt zwar alles suppa nur will ich das nich mit einer festen größe definieren

was mach ich falsch ?

  1. hi,

    was mach ich falsch,

    #x{
    width: auto;
    margin: 16px 18px 50px 18px;
    float: left;
    text-align:left;
    }

    #x{
    width: 751px;
    margin: 16px 18px 50px 18px;
    float: left;
    text-align:left;
    }

    was mach ich falsch ?

    Gefloatete Elemente richten sich nach ihrem Inhalt. Irgendwas wirst du schon angeben müssen. Ein display: block; und width: 100%; müsste eigentlich gehen.
    grüße

    1. hmm , naja das problem ist eig wieso setzt ie eine grenze sprich das ende des
      browsers wenn ich auto bzw 100% und firefox setzt zwar auch ein ende aber er
      setzt es automatisch in die nächste zeile sprich unter meinem menü

      1. hmm , naja das problem ist eig wieso setzt ie eine grenze sprich das ende des browsers wenn ich auto bzw 100% und firefox setzt zwar auch ein ende aber er setzt es automatisch in die nächste zeile sprich unter meinem menü

        Solange dein Float Element ein Child ist, wird es von FF und Opera auf die nächste Zeile gesetzt:

        <div>
        <div style="float:left">...</div>
        normaler Inhalt
        <div>
        erscheint auf nächster Zeile

        ---------

        <div style="float:left">...</div>
        <div>
        normaler Inhalt
        <div>
        Macht das, was du beabichtigst.

        Ich weiss nicht ob das aus Performance-Gründen so gemacht wird, oder ob es eine explizite Direktive im CSS 2.1 dazu gibt (denke nicht).

        mfg Beat

        1. Ok danke ich probier mal ;)

        2. hi,

          Solange dein Float Element ein Child ist, wird es von FF und Opera auf die nächste Zeile gesetzt:

          <div>
          <div style="float:left">...</div>
          normaler Inhalt
          <div>
          erscheint auf nächster Zeile

          Und das testest du, bevor du sowas postest?

          <div style=" border: 1px solid #000;">
          <div style="float:left; border: 1px solid red;">normaler Inhaltnormaler Inhaltnormaler Inhalt</div>
          normaler Inhalt
          <div>

          Bei mir ist es so wie ich es erwarten würde, gefloatet.
          grüße

          1. <div style=" border: 1px solid #00f;">
            Hier ist normaler Inhalt mit ein paar Worten
            <div style="float:left; border: 1px solid red;">Gefloateter Inhalt</div>
            normaler Inhalt Fortsetzung und noch etwas Text dazu.
            <div>

            Danke dass du mich auf den Fehler aufmerksam machst.
            Hoffe das Beispiel zeigt auch dir das Verhalten.

            mfg Beat

            1. hi,

              <div style=" border: 1px solid #00f;">
              Hier ist normaler Inhalt mit ein paar Worten
              <div style="float:left; border: 1px solid red;">Gefloateter Inhalt</div>
              normaler Inhalt Fortsetzung und noch etwas Text dazu.
              <div>

              Danke dass du mich auf den Fehler aufmerksam machst.
              Hoffe das Beispiel zeigt auch dir das Verhalten.

              ich muss zugeben, ich weiss gar nicht so recht, was OP überhaupt will. :)

              grüße

              1. <div style=" border: 1px solid #00f;">
                Hier ist normaler Inhalt mit ein paar Worten
                <div style="float:left; border: 1px solid red;">Gefloateter Inhalt</div>
                normaler Inhalt Fortsetzung und noch etwas Text dazu.
                <div>

                Danke dass du mich auf den Fehler aufmerksam machst.
                Hoffe das Beispiel zeigt auch dir das Verhalten.

                ich muss zugeben, ich weiss gar nicht so recht, was OP überhaupt will. :)

                Leuchtet die Anwendung solchen Codes nicht ein?

                Stelle dir einen Text vor, der gelegentlich Worte hat, welchen unmittelbar ein float mit einem Stichwort als Inhalt folgt. Das Float-Element wird an den Rand gesetzt, eventuell noch über den normalen Textrand hinaus.
                Wir finden diese Layout-Technik bei Buchtexten, die für ein Kettenverzeichnis Begriffe an den Rand notieren. Hierbei ist nicht erwünscht, dass zusätzlich Absätze entstehen. Deshalb erscheinen zum Beispiel gefloatete Blockelemente als normale flow-children im 'Fliesstext'.

                Das Beispiel stellt also den Nachbau einer Buchtechnik dar, bei man im Internet vielleicht eher die Option mit CSS-Popups hat.

                Man muss also nicht eine Konstruktion verwerfen, nur weil eine praktische Anwendung nicht gleich bekannt ist.

                mfg Beat

                1. hi,

                  Leuchtet die Anwendung solchen Codes nicht ein?

                  Stelle dir einen Text vor, der gelegentlich Worte hat, welchen unmittelbar ein float mit einem Stichwort als Inhalt folgt. Das Float-Element wird an den Rand gesetzt, eventuell noch über den normalen Textrand hinaus.
                  Wir finden diese Layout-Technik bei Buchtexten, die für ein Kettenverzeichnis Begriffe an den Rand notieren. Hierbei ist nicht erwünscht, dass zusätzlich Absätze entstehen. Deshalb erscheinen zum Beispiel gefloatete Blockelemente als normale flow-children im 'Fliesstext'.

                  Für mich klang es nach einfachem floaten,
                  http://de.selfhtml.org/css/eigenschaften/anzeige/float.htm
                  wo dann das gefloatete als block dargestellt werden sollte.
                  Aber deine Theorie klingt auch logisch.
                  grüße

    2. Gefloatete Elemente sind inherent vom Typ block.

      mfg Beat