botl1k3: padding/margin nach floatenden Elementen

Hallo,

ich habe ein kleines Problem ;)
Ich habe ein div in dem ein Dormular ist, in dem wiederum Elemente sind die floaten, also in etwa so:

[code lang=html]      <h1>Login</h1>
      <div id="login" style="background-color: #ff0">
        <form method="post" action="login.php" target="_blank">
              <label for="benutzer">Benutzer:</label>
              <input name="benutzer" id="login_benutzer" type="text" value="" maxlength="60">
              <label for="passwort">Passwort:</label>
              <input name="passwort" id="login_passwort" type="password" value="" maxlength="60">
              <input name="submit" id="login_submit" type="submit" class="button" value="anmelden">
        </form>
      </div>
      <h1>Etwas unter dem Login</h1>[/code}

soo, also wie ihr sehen könnt, ist unter dem div ein h1 Element.. dass soll jetzt einen Abstand von 20px haben.
Also in meinem Stylesheet hat jedes div ein margin von 10px 0 20px 0, also 20px nach unten. Der IE7 macht das auch, FireFox nicht. Das h1-Element hat im style übrigens ein clear: both;
Ich stehe bestimmt auf dem Schlauch und es gibt eine elegante Methode so ein Problem zu lösen, richtig? Ich meine, das ist jetzt kein sehr seltenes Problem das ich habe nehme ich an..

Gruß,
Mario

  1. Hi,

    soo, also wie ihr sehen könnt, ist unter dem div ein h1 Element.. dass soll jetzt einen Abstand von 20px haben.

    woran sollten wir das sehen wenn Du mit h1 anfängst?

    Also in meinem Stylesheet hat jedes div ein margin von 10px 0 20px 0,

    Ich vermute mal Du beachtest nicht, dass gefloatete Elemente keine Höhe im Eltern-Element erzeugen, da sie aus dem Fluss hereusgenommen wurden. Eventuell hilft hier ein abschliessendes br style="clear:both" innerhalb des Divs. Für IE6 in CC's ggf auch mal eine Dummy-Höhe setzen (hasLayout)

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. Hi,

      soo, also wie ihr sehen könnt, ist unter dem div ein h1 Element.. dass soll jetzt einen Abstand von 20px haben.
      woran sollten wir das sehen wenn Du mit h1 anfängst?

      an meinem gepostetem Code?

      Also in meinem Stylesheet hat jedes div ein margin von 10px 0 20px 0,
      Ich vermute mal Du beachtest nicht, dass gefloatete Elemente keine Höhe im Eltern-Element erzeugen, da sie aus dem Fluss hereusgenommen wurden. Eventuell hilft hier ein abschliessendes br style="clear:both" innerhalb des Divs.

      Das hatte ich testweise gemacht. Funktionieren tut es, nur leider nicht "Pixelgenau" -> führt im IE7 zu einem völlig anderem Abstand (kaum mehr, also unter 20px) als im Firefox (20px...)
      Muss ich also damit leben?

      Gruß

      1. Hi,

        Das hatte ich testweise gemacht. Funktionieren tut es, nur leider nicht "Pixelgenau" -> führt im IE7 zu einem völlig anderem Abstand

        weil der wegen hasLayout min-heigh braucht, dass Du aber ganz normal im css notieren kannst.

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
        1. weil der wegen hasLayout min-heigh braucht, dass Du aber ganz normal im css notieren kannst.

          Da hast du Recht, vielen Dank!!

          Gruß,
          Mario