Jack: Ungewollte Abstände / Lücken zwischen Blöcken

Hallo!

Mein Problem ist folgendes -
Ich habe fünf <div>-Blöcke, die so angeordnet sind:

[Block1] [Block2]
(clear:both)
[Block 3]
(clear:both)
[Block 4] [Block 5]

Grundsätzlich funktioniert alles. Nur an der Stelle, an der das clear:both eingebaut ist, entstehen große Lücken. Die Lücke zwischen Block 3 und Block 4/5 stört am meisten. Ich kann mir nicht erklären, wie diese entstehen, da z.B. Block 3 und 4/5 kein margin enthalten.

Hat jemand eine Idee, woran das liegt? Und wie ich das Problem lösen kann?

Anscheinend ist das Problem bei horizontalen Elementen bekannt (3-Pixel-Bug?), aber ich habe keine Lösung für meine Situation (vertikale Block-Anordnung) gefunden.

(Hier noch der dazugehörige CSS-Code:

#block3 {
  float: left;
  position:relative;
  height: 22px;
  width: 98%;
  background-color: #F3F3FF;
 }
 #block4 {
  float: left;
  width: 20%;
  height: 250px;
  overflow:auto;
  padding: 1px;
  background-color: #F3F3FF;
 }

Block 5 ist der selbe wie Block 4.)

Danke im Voraus,
Jack

  1. Hallo Jack!

    [Block1] [Block2]
    (clear:both)
    [Block 3]
    (clear:both)
    [Block 4] [Block 5]

    Wieso benutzt du clear: both; wenn Du doch darüber nur left floatest?

    OK, das wird nicht der Fehler sein. Aber wo bitte wird bei Dir in diesem CSS Code der Fluß gebrochen? Kann es sein, dass Du uns ein Fluß brechendes Blockelement zwischen den beiden beschrieben Blöcken verschweigst?

    #block3 {
      float: left;
      position:relative;
      height: 22px;
      width: 98%;
      background-color: #F3F3FF;
    }
    #block4 {
      float: left;
      width: 20%;
      height: 250px;
      overflow:auto;
      padding: 1px;
      background-color: #F3F3FF;
    }

    Schönen Gruß

    Afra

    1. Hallo Afra!
      Danke schon mal für deine Antwort.

      Aber wo bitte wird bei Dir in diesem CSS Code der Fluß gebrochen? Kann es sein, dass Du uns ein Fluß brechendes Blockelement zwischen den beiden beschrieben Blöcken verschweigst?

      Entschuldige, aber ich bin mir jetzt nicht ganz sicher, was du mit "Fluß unterbrechen" meinst.

      Die Datei, in der ich die Block-Elemente einfüge, ist ungefähr so aufgebaut:

      <div id="block1">text</div>
      <div id="block2">text</div>
      <div id="clear"></div> <- enthält nur clear:both, selbes Problem mit clear:both als <p>-Element
      <div id="block3">text</div>

      usw..

      PS: Ich habe gerade festgestellt, dass dieses Problem nur beim Internet Explorer auftritt. Dort sind die Lücken so groß, wie ein Zeilenumbruch (<br>). Was wird denn vom IE anders interpretiert als vom Firefox?

      Grüße,
      Jack

      1. Hallo Jack!

        Entschuldige, aber ich bin mir jetzt nicht ganz sicher, was du mit "Fluß unterbrechen" meinst.

        Ich habe mich auch etwas umständlich ausgedrückt.

        Durch float nimmst Du die Elemente aus dem Dokumentfluß. D.h. sie haben keine Höhe mehr und darauf folgende Elemente müssen irgendwie wieder normale Elemente werden. Wieso erledigst Du das nicht mit dem dann auch wirklich folgenden Element? Wenn Du ein Blockelement wie p oder div clearend zwischen zwei floatende Elemente setzt, dann wird der IE (auch wenn diese leer sind) wahrscheinlich dieses als eben einen Zeilenumbruch hoch darstellen.

        <div id="block1">text</div>
        <div id="block2">text</div>
        <div id="clear"></div> <- enthält nur clear:both, selbes Problem mit clear:both als <p>-Element

        Dies hatte ich in meinem Ausgangsposting "geraten".

        <div id="block3">text</div>

        So lange Du uns aber nicht _allen_ relevanten Code lieferst ist alles Geschriebene auch gleichzeitig Geratenes.

        Schönen Gruß

        Afra

        1. Hallo Afta!

          Danke. Ich habe zwar eine ganze Weile nicht verstanden, wo in meinem Quelltext der Fehler ist, weil ja alles irgendwie funktioniert hat. Aber ich konnte das Problem lösen, indem ich das clear:both entfernt habe. Wahrscheinlich hast du das auch gemeint.
          Ich habe mich nur nicht getraut es zu entfernen, weil ich anfangs Darstellungsprobleme hatte, als ich clear:both weggelassen habe.

          Danke nochmals für deine Hilfe!
          Jack

          1. Hallo Afta!

            Argh! Peinlich! Sollte natürlich Afra heißen!

            1. Hallo Jack!

              Argh! Peinlich! Sollte natürlich Afra heißen!

              Hauptsache Du hast es nicht geschrieben wie es sich spricht ;)

              Schönen Gruß