Hallo zusammen,
nachdem ich jetzt das ganze Wochenende versucht habe, eine Lösung zu finden gebe ich es nun auf und frage mal hier nach.
Folgendes Situation:
Ich möchte tabellarisch gesehen eine Darstellung haben, wo 2 Spalten nebeneinander stehen und die rechte Spalte nochmal in 2 Zellen aufgeteilt wird.
Quasi so:
11 22
11 33
Wenn jetzt die erste Spalte wächst (alle Daten kommen aus der DB) soll die Zelle 2 oben hängen und Zelle 3 unten hängen:
11 22
11
11
11 33
Wenn die Zellen 2 und oder 3 mehr gefüllt sind, soll die Zelle 1 natürlich mitwachsen.
Ich habe es erst mit float versucht. Da bekam ich aber Probleme dass z.B. die Zelle 1 nicht mitgewachsen ist.
Mein letzter Stand ist folgender:
Das klappt soweit auch, aber anscheind gibt hier die Zelle 1 die Höhe an und wächst nicht mit, wenn 2 und 3 größer werden. Wenn 2 und 3 zusammen größer sind als die Zelle 1 überlappen die sich einfach.
Gibt es da einen Trick die Überlappung zu verhindern und Zelle1 mitwachsen zu lassen?
Vielen Dank!
nachdem ich jetzt das ganze Wochenende versucht habe, eine Lösung zu finden gebe ich es nun auf und frage mal hier nach.
Folgendes Situation:
Ich möchte tabellarisch gesehen eine Darstellung haben, wo 2 Spalten nebeneinander stehen und die rechte Spalte nochmal in 2 Zellen aufgeteilt wird.
Quasi so:
11 22
11 33
Wenn jetzt die erste Spalte wächst (alle Daten kommen aus der DB) soll die Zelle 2 oben hängen und Zelle 3 unten hängen:
11 22
11
11
11 33
Wenn die Zellen 2 und oder 3 mehr gefüllt sind, soll die Zelle 1 natürlich mitwachsen.
Ich habe es erst mit float versucht. Da bekam ich aber Probleme dass z.B. die Zelle 1 nicht mitgewachsen ist.
Mein letzter Stand ist folgender:
CSS:
<div style="width:650px; border:1px #000 solid;">
<div style="display:table-row; border:1px #000 solid;">
<div style="display:table-cell;width:130px; border:1px #000 solid;">1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
<div style="display:table-cell; position:relative;">
<div style="position:absolute; top:0; width:510px; border:1px #000 solid;">2<br>2<br>2<br>2<br>2<br>2<br>2<br></div>
<div style="position:absolute; bottom:0; width:510px; border:1px #000 solid;">3<br>3<br>3<br>3<br>3<br>3<br>3<br></div>
</div>
</div>
</div>
Das klappt soweit auch, aber anscheind gibt hier die Zelle 1 die Höhe an und wächst nicht mit, wenn 2 und 3 größer werden. Wenn 2 und 3 zusammen größer sind als die Zelle 1 überlappen die sich einfach.
Gibt es da einen Trick die Überlappung zu verhindern und Zelle1 mitwachsen zu lassen?
Vielen Dank!