✔ DIVs nebeneinander und untereinander wie collapsible tabelle

[kharn]

Hallo zusammen,

DIVs kann man ja recht einfach per float nebeneinander stellen und wenn man darum noch ein anderes DIV packt auch Spaltenartig anordnen:

| [a] [b] |
| [ c] [d] |
| [e] [f] |

mein Problem ist nun das ich per Javascript die Höhe der inneren DIVs anpassen kann, was dazu führt das wenn ich z.B. einen der rechten inneren DIVs höher mache die komplette nächste Zeile nach unten rutscht, sprich die DIVs aus beiden Spalten die auf das vergrößerte DIV folgen:

| [a] [B] |
| __ [B] |
| [ c] [d] |
| [e] [f] |

Habt ihr dafür einen eleganten Workaround, ausser die beiden Spalten in separate DIVS zu packen? Denn ich möchte folgendes erzeugen:

| [a] [B] |
| [ c] [B] |
| [e] [d] |
| __ [f] |

Mein Beispiel findet ihr hier


Grüße
Ralf

 

[Maik]

Hi,

am Einfachsten löst du dies wohl mit den zwei übergeordneten DIVs, die als Spaltenblöcke fungieren, um den unerwünschten Umbruch des benachbarten Elements zu verhindern.

Ansonsten hättest du hier per JS fortwährend die Gesamt-Höhen der linken und rechten Boxen im Gegenvergleich zu überwachen, um beim Öffnen einer der Boxen, die aufgetretene Differenz an die Betroffene mittels einem negativen margin-top-Wert zu übergeben, und sie auf diese Weise nach oben zu verrücken, und beim Schliessen der Box, diesen gesetzten negativen Außenabstand wieder zurückzunehmen.

mfg Maik