DIVs in zwei Spalten aufteilen

hi

angenommen, ich hätte 6 DIVs ( oder sonst ne Anzahl) die unterschiedlich gross sind (Breite bei allen gleich, Höhe nach Inhalt).
Nun wollte ich die dass diese 6 DIVs in zwei Spalte verteilt werden, und zwar so, dass möglichst beide Spalten gleich lang sind.

Leider kann ich nicht einfach sagen DIV 1-3 linke Spalte, DIV 4-6 rechte Spalte, de vielleicht 1-3 zusammen nur 400px hoch wären, und 4-6 über 2000px.
Etwa so:

Das sind drei verschiedene Beispiele à je 2 Spalten.

Mir ist glaubs bekannt, dass die aktuellen CSS Spezifikationen Text Kolumnen noch nicht unterstützen, CSS3 (oder zumindest FF und Webkit) dies aber ermöglicht.

Nun, gibt es trotzdem einen Workaround?

Was ich mir vorstellen könnte, wenn auch etwas umständlich, nach dem Rendern die Höhen der DIVs per JS auszulesen, und mit einer Rechnung zu entscheiden wo getrennt wird.

Aber eben, etwas umständlich und ohne JS nicht möglich -> Barrierefreiheit.

Kennt jemand sonst noch eine Lösung?

Genau gleich hoch ist bei unbekanntem Inhalt mit HTML und CSS bei DIVs nicht möglich, aber du kannst dir ein Container erstellen mit zwei gefloateten DIVs als Spalten. Der Container wird dann immer für beide Spalten gleich gross sein, wenn du z.B. am Schluss im Container ein "clear:both" einfügst.

Gut, dass die beiden Spalten nicht genau gleich gross sein können ist mir klar.
Es geht halt nur optisch darum, dass die ungefähr gleichgross sind.
Nicht dass die linke Spalte ganz kurz ist, und die rechte super lang.

Auf dem Bild oben sieht man es denke ich gut. Die dunkelgrünen Felder sind die DIV-Absätze, das Hellgrüne ist eigentlich nur da, damit man sieht es sind 3 Beispiele à zwei Spalten, und nicht ein Beispiel à 6 Spalten.
Sichtbar wäre der Hellgrüne Bereich nicht.

Nicht dass die linke Spalte ganz kurz ist, und die rechte super lang.

das hängt einzig und allein vom inhalt ab. mehr kann man da nicht machen. oder du haust einfache so lange leere absätze in ein div, bist es passt. ist zwar nicht die feine englische art, aber imho die einzige möglichkeit

peter

Bleibt ansich wirklich nur die Möglichkeit über JS: http://de.selfhtml.org/javascript/ob...#offset_height

Brauchste nur noch einen tollen Algorithmus, welcher ein ausgewogenes Bild errechnet mit den Höhen

Wenn du die Länge der Texte indirekt schon nach den Boxen 1 - 5 vergibst, dann wäre der Algorithmus 1 + .. + x = 5 - ... - x . (wäre natürlich ein Sonderfall)
Wenn die Boxen alle unterschiedlich sein können, dann müsstest du wohl tatsache etwas knobeln bzw. vlt doch alle Varianten durchrechnen lassen..

mfg

Oder du verwendest einfach dennoch eine Tabelle... Das wäre meiner Meinung nach noch eine bessere lösung als mit Javascript.

Zitat von jmc

Oder du verwendest einfach dennoch eine Tabelle...

..und die bringt was?

Die DIVs werden dynamisch erstellt, es kann also sein, dass mal der DIV-1 zwanzig Zeilen hat, DIV-2 nur 2 Zeilen, und DIV-3 bereits 40 Zeilen Text.

Aber wie es ausschaut, muss ich wohl wirklich nach dem Rendern mit JS die Höhen auslesen und mit einem Algo ausrechnen wo ich "umbrechen" soll.

Schade, dachte es gäbe bereits eine besser Lösung, aber egal, ein wenig Knüffeln muss auch sein

Das ist ein Fehler im Designkonzept. Wenn du unterschiedlich lange, aber gleichwertige Inhalte hast, dann solltest du sie nicht zweispaltig darstellen. Das erschwert die Lesbarkeit und macht die ganze Seite "unordentlich". Mit Bildern kann man das mal so machen, aber nicht mit Text.
Zieh jedes DIV über die gesamte Breite und alles ist gut.

Nun, es ist zu sagen, dass es sich beim Inhalt der DIV nicht um Text handelt, sondern es sind Daten (Jahreszahlen mit kurzem Beschreib à ~4 Wörtern).

Die verschiedenen DIVs sind die verschiedenen Kategorien in wechle die Daten unterteilt sind (Ausstellungen, Werke, Ausbildung, etc).

Im Design benötigen die etwas weniger als die Hälfte von der Seite. Ich denke es wäre eher ein Fehler im Design wenn ich die Seite sehr lang und dafür in der Breite nur halb genutzt machen würde.

Ähnlich wie bei wikipedias alphabetischer Auflistung. Anstatt eine Spalte zu machen die super lang wäre, und welche die Breite nicht nutzen würden, haben sie auch drei Spalten gemacht die +/- gleichlang sind.

Wenn es jetzt wirklich einfach nur ein normaler Text wäre dann, ja klar würde ich die ganze Breite einfach nutzen, aber da es sich hierbei um Auflistungen handelt welche die Breite nicht ganz nutzen würden wäre es eine a) Platzverschwendung und b) unnötige Scrollorgie.

Edit:
ähnliches Prinzip hier zu finden.
http://www.fit-inn.ch/power-plate.htm
Ist irgendwie angenehmer (meiner Meinung nach) das in zwei Spalten zu lesen, als in einer einzigen.

(Jahreszahlen mit kurzem Beschreib à ~4 Wörtern).

Das ist doch auch "nur" Text. ;-)

Ähnlich wie bei wikipedias alphabetischer Auflistung.

Hier ist die Anzahl der Einträge bekannt. Im Normalfall ist ein Eintrag exakt eine Zeile hoch .. Damit gibt es nicht das Problem wie bei dir. Du hast n Boxen mit unterschiedlichen Höhen. Korrekt?

ähnliches Prinzip hier zu finden.

Ich vermute, dass diese Seite NICHT dynamisch so ausgerichtet wird.

Zitat von fabio

aber da es sich hierbei um Auflistungen handelt

Gut erkannt. Aber warum klatschtst du das ganze dann in Divs?

die DIVs sind dann lediglich als Wrapper zuständig.

also etwa so:

<div>
<h3>Ausstellungen</h3>
<ul>
<li>1997, Kunsthaus Wattwil</li>
<li>2001, Villa Zürich</li>
<li>2003, Schränligarten</li>
<li>2007, Private Ausstellung Winterthur</li>
</ul>
</div>

Dann hast du es ja ziemlich einfach... Du hast da eine Bestimmte Anzahl von <li>s - wieviele wirst du ja wohl herausfinden können wenn sie Dynamisch erstellt werden. Dann hast du einen bestimmten Abstand zwischen jedem Div und du kannst das ganze ziemlich einfach ausrechnen.
Wie genau es dann aussehen soll, bzw. wie die DIVs angeordnet sein sollen und wie genau sie dynamisch erstellt werden müsstest du hier noch etwas genauer reinschreiben, wenn du iene genauere Antwort willst.

Wie gesagt, ausrechnen könnte ich es scho, und auszählen wieviele <li>-Elemente ausgegeben werden ist auch kein Problem.
Ich dachte nur, vielleicht gibt es eine einfache Lösung ohne Rechnerei. Vielleicht ja sogar ein einfacher CSS-Tag den ich nicht kenne (à la columns:2).

Aber wen es nichts fertiges gibt mach ich das per JS (PHP ist nicht gut, da die einzelnen LI nicht immer gleichgross sind, einige haben noch kleinere (40*40px) Icons drinnen.

Anyway, ich werd das mit JS erledigen