RomanD: 2-spaltige Formatierung

Hi,

ich habe 4 div-Container mit jeweils unterschiedlicher, dynamischer Höhe.
Ich möchte, dass jeweils 2 div's Links und 2 div's Rechts angeordnet werden. Dabei soll kein vertikaler Zwischenraum zwischen den beiden rechten und den beiden linken div's sein.
Zur Veranschaulichung:
http://www.roman-drechsel.de/Upload/beispiel.JPG

Hier der gekürzte Code:
---- HTML
[...]
<div id="details">[... Inhalt ...]</div>
<div id="dateien">[... Inhalt ...]</div>

<div style="clear:both"></div>

<div id="notizen">[ ... Inhalt ...]</div>
<div id="changelog">[ ... Inhalt ...]</div>

<div style="clear:both"></div>

--- CSS
#details {
 width:45%;
 text-align:left;
 display:inline;
 position:relative;
 float:left;
}
#dateien {
 width:45%;
 text-align:left;
 display:inline;
 position:relative;
 float:right;
 padding-right:3%;
}
#notizen {
 /*width:97%;
 text-align:center;*/
 width:45%;
 text-align:left;
 display:inline;
 position:relative;
 float:left;
}
#changelog {
 width:45%;
 text-align:left;
 float:right;
 padding-right:3%;
}

Mein Problem:
Sollte z.B. auf der rechten Seite der Div "Dateien" sehr hoch sein, entsteht auf der linken Seite zwischen "Details" und "Notizen" ein großer Zwischenraum.
Zur Veranschaulichung:
http://www.roman-drechsel.de/Upload/beispiel2.JPG

Wie kann ich den wegbekommen?

Gruß

  1. Ich bin mir jetzt nicht sicher, was du für ein Ergebnis genau erreichen willst, aber ich glaube du meinst einfach, dass jeweils auf beiden Seiten 2 Boxen untereinander liegen.

    Du kannst entweder diese Zeilen:
    <div style="clear:both"></div>
    entnehmen, wodurch du das floaten zwischen den untereinander liegenden Boxen nicht unterbrichst bzw. ,,pausierst´´
    oder du machst einen linken Container, den du als einziges links floatest, und einen rechten Container, den du als einzigen rechts floatest, worin sich dann die einzelnen Boxen der jeweiligen Seite befinden.

    Ich hoffe ich konnte dir helfen,
    Inno

  2. Hi!

    Dein Problem ist eher, dass du in Tabellen denkst. Wenn ich das richtig sehe, hat Inno recht und du moechtest 2 Divs untereinander links und 2 untereinander rechts. Da hat er Dir schon den richtigen Tipp gegeben. Du erstellst einen Container fuer die linke und einen fuer die rechte Spalte. Was Du allerdings nicht tun solltest, wenn du keine Luecke zwischen diesen Spalten haben willst: eine links und eine rechts floaten. Floate beide links und es ist gut. Wenn Du darunter noch etwas haben moechtest, baust du noch ein clear ein.

    1. Hi,

      Vielen Dank, so hats funktioniert ;)

      Gruß

  3. Hi RomanD,

    Zur Veranschaulichung:
    http://www.roman-drechsel.de/Upload/beispiel2.JPG

    Wie kann ich den wegbekommen?

    Ich klink mich einfach mal ungefragt ein. :) Was du erreichen willst ist eigentlich Recht Simpel,
    dazu haben meine vorredner ja schon was gesagt, ich wollte mal ein bsp. liefern, wie das
    mit Klassen sehr einfach zu lösen ist.

    Da ich grade zufällig an etwas ähnlichem arbeite habe ich dir ein beispiel zusammen gefrickelt,
    im Quelltext steht alles relevante.

    http://nimmet.de/beispiele/4_boxen_set.php

    Grüße aus H im R,
    Engin