4 Kolumnen. Dynamischer Inhalt.

[m_uga]

Hallo!

Eine Frage beschäftigt mich schon seit längerem und bringt mich zum Verzweifeln.

Ich möchte nämlich mit CSS folgende Aufteilung der Kolumnen erreichen:

---------------------------
|           |             |
|           |             |
|   A1      |     A3      |
|           |             |
|           |             |
---------------------------
|           |             |
|           |             |
|   A2      |     A4      |
|           |             |
|           |             |
---------------------------

Das Problem ist, dass:

1. der Inhalt der DIVs dynamisch erstellt wird, das heißt ich weiß nicht wie lang sie sind und

2. im HTML die DIVs so angeordnet sind:

<DIV id="all">
 <DIV id="a1">A1 Esto exerilla commod magna commy nibh ercil utpat
 praessis aut ad tie faciliquisit wis nons nos duismodio euissed
 minis ad modionummy nim quisit num venibh eliqui eliquat uerosto od
 dit vel ex eum iure dionulla faccum nulla feugait et, quiscillam,
 sim accum in utat augiam quissi eraestrud esequatisi.</DIV>

<DIV id="a2">A2 Esto exerilla commod magna commy nibh ercil utpat
 praessis aut ad tie faciliquisit wis nons nos duismodio euissed
 minis ad modionummy nim quisit num venibh eliqui eliquat uerosto od
 dit vel ex eum iure dionulla faccum nulla feugait et, quiscillam,
 sim accum in utat augiam quissi eraestrud esequatisi.</DIV>

<DIV id="a3">A3 Esto exerilla commod magna commy nibh ercil utpat
 praessis aut ad tie faciliquisit wis nons nos duismodio euissed
 minis ad modionummy nim quisit num venibh eliqui eliquat uerosto od
 dit vel ex eum iure dionulla faccum nulla feugait et, quiscillam,
 sim accum in utat augiam quissi eraestrud esequatisi.</DIV>

<DIV id="a4">A4 Esto exerilla commod magna commy nibh ercil utpat
 praessis aut ad tie faciliquisit wis nons nos duismodio euissed
 minis ad modionummy nim quisit num venibh eliqui eliquat uerosto od
 dit vel ex eum iure dionulla faccum nulla feugait et, quiscillam,
 sim accum in utat augiam quissi eraestrud esequatisi.</DIV>
</DIV>

Habe schon viele Kombinationen von float und position und so weiter ausprobiert, leider ohne Erfolg.

Für alle Lösungsvorschläge wäre ich sehr verbunden.

Mfg.

[suit]

Kolumnen

meinst du wirklich kolumnen (in sinne von meinungsgeprägten, randartikeln in spaltenform) oder meinst du spalten und hast das "frei" übersetzt? ;D

Das Problem ist, dass:

1. der Inhalt der DIVs dynamisch erstellt wird, das heißt ich weiß nicht wie lang sie sind und

Für alle Lösungsvorschläge wäre ich sehr verbunden.

ggf die reihenfolge im quelltext ändern (a2 und 3 vertauschen), ein zusäztliches element um a1 und a3 sowie a2 und a3 und die aufteilung mit faux columns suggerieren

damit gehts du zwar schon wieder einen schritt in richtung code und layout mischen, aber in diesem fall ist das wohl praktikabel

[m_uga]

Gemeint sind wohl Spalten und Zeilen :) aber danke für den Hinweis.

Im HTML mag ich nichts umstellen. Es werden nämlich mehrere Layouts erstellt. Und dann funktionieren die anderen nicht.

Allerdings könnte ich weitere leere DIVs zwischen den a1 bis a4 hinzufügen, wenn das was hilft.

[suit]

Allerdings könnte ich weitere leere DIVs zwischen den a1 bis a4 hinzufügen, wenn das was hilft.

javascript ist noch eine möglichkeit zum anpassen der spaltenbreiten - oder eben feste höhen und bei überlangem text scrollen

aber diese schöne "kreuzfuge" ist wohl etwas schwierig hinzubekommen

[m_uga]

Allerdings könnte ich weitere leere DIVs zwischen den a1 bis a4 hinzufügen, wenn das was hilft.
javascript ist noch eine möglichkeit zum anpassen der spaltenbreiten - oder eben feste höhen und bei überlangem text scrollen

aber diese schöne "kreuzfuge" ist wohl etwas schwierig hinzubekommen

Ja, wenn man nicht im vorhinein weiss, wie breit oder hoch etwas ist, dann ist die Arbeit mit CSS eine Qual.